:root{
  --bg:#efefef;
  --bg-2:#ececec;
  --ink:#2f2f2f;
  --muted:#575757;
  --line:rgba(52,52,52,.14);

  --soft-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 12px 24px rgba(45,45,45,.10),
    0 2px 5px rgba(45,45,45,.08);

  --shell:1380px;
}


/* ==========================================================
   BASE
   ========================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  min-width:320px;

  color:var(--ink);

  background:
    radial-gradient(
      circle at 50% 0%,
      #f7f7f7 0%,
      #eeeeee 48%,
      #e9e9e9 100%
    );

  font-family:"Inter Tight", Inter, Arial, sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  overflow-x:hidden;
}

img,
svg,
video{
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

.shell{
  width:min(calc(100% - 96px), var(--shell));
  margin-inline:auto;
}

.section{
  position:relative;
  overflow:hidden;
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header{
  position:fixed;
  inset:0 0 auto 0;

  z-index:100;

  height:96px;

  padding:
    0
    max(
      24px,
      calc((100vw - var(--shell))/2 + 34px)
    );

  display:flex;
  align-items:center;
  justify-content:space-between;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(239,239,239,.80),
      rgba(239,239,239,.25),
      transparent
    );

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.brand,
.socials{
  pointer-events:auto;
}

.brand img{
  width:44px;
  height:auto;
}

.socials{
  display:flex;
  gap:20px;
}

.socials a{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  transition:transform .25s ease;
}

.socials a:hover{
  transform:translateY(-2px);
}

.socials svg{
  width:30px;
  height:30px;

  fill:none;
  stroke:#2d2d2d;

  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.socials .svg-fill{
  fill:#2d2d2d;
  stroke:none;
}


/* ==========================================================
   WHATSAPP HEADER
   ========================================================== */

.whatsapp-icon{
  overflow:visible;

  width:30px;
  height:30px;

  fill:none;
  stroke:#2f2f2f;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.whatsapp-icon path:last-child{
  fill:#2f2f2f;
  stroke:#2f2f2f;
  stroke-width:.8;
}


/* ==========================================================
   BOTONES
   ========================================================== */

.soft-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:170px;
  height:50px;

  padding:0 28px;

  border-radius:999px;

  border:1px solid var(--line);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88),
      rgba(232,232,232,.72)
    );

  box-shadow:var(--soft-shadow);

  color:#3a3a3a;

  font-size:16px;
  font-weight:500;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.soft-btn:hover{
  transform:translateY(-3px);

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #ececec
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 15px 30px rgba(42,42,42,.14),
    0 2px 6px rgba(42,42,42,.08);
}


/* ==========================================================
   REVEAL
   ========================================================== */

.reveal{
  opacity:0;

  transform:translateY(26px);

  transition:
    opacity .85s cubic-bezier(.22,.7,.2,1),
    transform .85s cubic-bezier(.22,.7,.2,1);

  transition-delay:var(--delay,0ms);
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}


/* ==========================================================
   DIV 1 - HERO
   ========================================================== */

.hero{
  position:relative;

  min-height:100svh;

  padding-top:96px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      110deg,
      #eeeeee 0%,
      #f5f5f5 50%,
      #e8e8e8 100%
    );
}


/* ==========================================================
   VIDEO BRAZO ROBÓTICO - FONDO COMPLETO
   ========================================================== */

.hero-robot-video{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  max-width:none;
  max-height:none;

  object-fit:cover;

  object-position:center;

  z-index:1;

  pointer-events:none;
}


/* ==========================================================
   CAPA SUAVE SOBRE EL VIDEO
   Ayuda a mantener legible el contenido
   ========================================================== */

.hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(239,239,239,.42) 0%,
      rgba(239,239,239,.18) 42%,
      rgba(239,239,239,.02) 70%,
      rgba(239,239,239,.05) 100%
    );
}


/* ==========================================================
   GRID HERO
   ========================================================== */

.hero-grid{
  min-height:calc(100svh - 96px);

  display:grid;

  grid-template-columns:
    minmax(340px,1.02fr)
    minmax(360px,.78fr)
    minmax(360px,.95fr);

  align-items:center;

  gap:16px;

  position:relative;

  z-index:5;
}


/* ==========================================================
   TEXTO GRANDE DE FONDO
   ========================================================== */

.hero-bg-text{
  position:absolute;

  left:max(
    0px,
    calc((100vw - var(--shell))/2 - 10px)
  );

  top:112px;

  z-index:3;

  display:flex;
  flex-direction:column;

  pointer-events:none;
  user-select:none;

  color:rgba(255,255,255,.80);

  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 8px 30px rgba(255,255,255,.16);

  font-weight:900;

  font-size:clamp(64px,8.2vw,118px);

  line-height:.86;

  letter-spacing:-.07em;
}


/* ==========================================================
   ÓRBITA
   ========================================================== */

.orbit-wrap{
  position:relative;

  z-index:6;

  grid-column:1;

  min-height:500px;

  display:grid;
  place-items:center;
}

.orbit{
  position:relative;

  width:min(410px,31vw);

  aspect-ratio:1;

  animation:
    floatY 6.4s ease-in-out infinite;
}

.orbit-ring{
  position:absolute;

  inset:14%;

  border-radius:50%;

  border:
    18px solid rgba(226,226,226,.96);

  box-shadow:
    0 8px 18px rgba(52,52,52,.10),
    inset 0 2px 8px rgba(255,255,255,.80);
}

.orbit-ball{
  position:absolute;

  width:34px;
  height:34px;

  top:8%;
  left:50%;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff 0%,
      #e8e8e8 45%,
      #bdbdbd 100%
    );

  box-shadow:
    0 10px 18px rgba(0,0,0,.15);
}

.orbit-node{
  position:absolute;

  width:104px;
  height:104px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #ffffff 0%,
      #eeeeee 50%,
      #dddddd 100%
    );

  border:1px solid rgba(255,255,255,.80);

  box-shadow:
    0 14px 28px rgba(42,42,42,.12),
    inset 0 1px 1px rgba(255,255,255,.95);
}

.orbit-node svg{
  width:54px;
  height:54px;

  fill:none;

  stroke:#777;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.node-gear{
  left:-4%;
  top:50%;
  transform:translateY(-50%);
}

.node-ai{
  right:-4%;
  top:50%;
  transform:translateY(-50%);
}

.node-chart{
  left:50%;
  bottom:-4%;
  transform:translateX(-50%);
}


/* ==========================================================
   TEXTO HERO
   ========================================================== */

.hero-copy{
  position:relative;

  z-index:7;

  grid-column:2;

  max-width:430px;
}

.hero-copy h1{
  margin:0;

  font-size:
    clamp(64px,5.6vw,96px);

  line-height:.88;

  letter-spacing:-.065em;

  font-weight:900;

  color:#303030;
}

.registered{
  display:inline-block;

  margin-left:5px;

  font-size:.13em;

  vertical-align:top;

  position:relative;

  top:.2em;

  letter-spacing:0;
}

.eyebrow{
  margin:18px 0 0;

  color:#4a4a4a;

  font-size:18px;
  font-weight:500;
}

.lead{
  margin:18px 0 0;

  max-width:390px;

  color:var(--muted);

  font-size:16px;

  line-height:1.58;
}

.hero-copy .soft-btn{
  margin-top:28px;
}


/* ==========================================================
   DIV 2
   ========================================================== */

.story{
  min-height:680px;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 70% 42%,
      rgba(255,255,255,.72) 0%,
      transparent 36%
    ),
    linear-gradient(
      100deg,
      #ededed 0%,
      #f3f3f3 60%,
      #e9e9e9 100%
    );
}

.story-grid{
  display:grid;

  grid-template-columns:
    minmax(390px,.84fr)
    minmax(420px,1fr);

  align-items:center;

  gap:96px;

  padding-block:70px;
}

.portrait-card{
  margin:0 0 0 2.4vw;

  width:min(458px,34vw);

  aspect-ratio:.72;

  overflow:hidden;

  border-radius:3px;

  box-shadow:
    0 16px 30px rgba(42,42,42,.09);
}

.portrait-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .75s ease;
}

.portrait-card:hover img{
  transform:scale(1.03);
}

.story-copy{
  max-width:520px;
}

.story-copy h2,
.systems-copy h2{
  margin:0;

  font-size:
    clamp(52px,4vw,74px);

  line-height:.95;

  letter-spacing:-.056em;

  font-weight:900;
}

.story-copy p,
.systems-copy p{
  margin:28px 0 0;

  max-width:500px;

  color:var(--muted);

  font-size:18px;

  line-height:1.52;
}

.round-action{
  margin-top:30px;

  width:82px;
  height:82px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:1px solid var(--line);

  background:
    radial-gradient(
      circle at 30% 25%,
      #ffffff 0%,
      #f2f2f2 38%,
      #e5e5e5 100%
    );

  box-shadow:var(--soft-shadow);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.round-action__inner{
  display:grid;
  place-items:center;

  width:42px;
  height:42px;
}

.round-action__inner svg{
  width:34px;
  height:34px;

  fill:none;

  stroke:#2d2d2d;

  stroke-width:1.9;

  stroke-linecap:round;
  stroke-linejoin:round;

  transform-origin:50% 50%;
}

.round-action:hover{
  transform:translateX(4px);

  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 15px 30px rgba(42,42,42,.13),
    0 2px 6px rgba(42,42,42,.08);
}

.round-action.is-animated{
  animation:
    actionRotate 850ms cubic-bezier(.2,.8,.2,1) 1;
}

.round-action.is-animated
.round-action__inner svg{
  animation:
    actionArrowRotate 850ms cubic-bezier(.2,.8,.2,1) 1;
}


/* ==========================================================
   DIV 3
   ========================================================== */

.systems{
  min-height:700px;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 72% 50%,
      rgba(255,255,255,.76) 0%,
      transparent 40%
    ),
    linear-gradient(
      110deg,
      #e8e8e8 0%,
      #f4f4f4 55%,
      #e6e6e6 100%
    );
}

.systems-grid{
  display:grid;

  grid-template-columns:
    minmax(390px,.78fr)
    minmax(580px,1.22fr);

  align-items:center;

  gap:22px;

  padding-block:64px;
}

.systems-copy{
  padding-left:2.2vw;

  position:relative;

  z-index:5;
}

.systems-copy .soft-btn{
  margin-top:28px;
}

.systems-art{
  position:relative;

  min-height:540px;

  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.systems-art__glow{
  position:absolute;

  right:10%;
  top:9%;

  width:min(640px,46vw);
  height:min(540px,36vw);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.40) 34%,
      transparent 68%
    );

  filter:blur(28px);

  border-radius:50%;

  pointer-events:none;
}

.systems-base{
  position:relative;

  z-index:2;

  width:min(780px,56vw);

  max-width:none;

  filter:
    drop-shadow(
      0 24px 28px rgba(40,40,40,.10)
    );

  animation:
    floatY 7.2s ease-in-out infinite;
}


/* Los iconos internos están ocultos */

.system-icon{
  display:none !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer{
  background:#303030;

  color:#cfcfcf;

  min-height:84px;

  display:grid;
  place-items:center;

  text-align:center;

  padding:22px 18px;
}

.site-footer p{
  margin:0;

  font-size:13px;

  line-height:1.4;
}

.footer-reg{
  font-size:.72em;

  vertical-align:top;

  position:relative;

  top:-.1em;
}


/* ==========================================================
   WHATSAPP FLOTANTE
   ========================================================== */

.whatsapp-float{
  position:fixed;

  left:28px;
  bottom:28px;

  width:60px;
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#25D366;

  box-shadow:
    0 10px 28px rgba(0,0,0,.18);

  z-index:9999;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.whatsapp-float svg{
  width:30px;
  height:30px;

  fill:none;

  stroke:#fff;

  stroke-width:1.9;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.whatsapp-float svg path:last-child{
  fill:#fff;

  stroke:#fff;

  stroke-width:.8;
}

.whatsapp-float:hover{
  transform:
    translateY(-4px)
    scale(1.05);

  box-shadow:
    0 15px 32px rgba(0,0,0,.22);
}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes floatY{

  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }

}

@keyframes actionRotate{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

@keyframes actionArrowRotate{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1100px){

  .shell{
    width:min(
      calc(100% - 56px),
      var(--shell)
    );
  }

  .site-header{
    height:88px;

    padding-inline:28px;
  }

  .hero{
    padding-top:88px;
  }

  .hero-grid{
    min-height:
      calc(100svh - 88px);

    grid-template-columns:
      .95fr
      .88fr
      1fr;

    gap:10px;
  }

  .hero-bg-text{
    left:-6px;
  }

  /* EL VIDEO SIGUE OCUPANDO TODO EL HERO */

  .hero-robot-video{
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
  }

  .orbit{
    width:min(350px,33vw);
  }

  .orbit-node{
    width:92px;
    height:92px;
  }

  .story-grid{
    gap:58px;
  }

  .portrait-card{
    width:min(390px,38vw);

    margin-left:0;
  }

  .systems-grid{
    grid-template-columns:
      .78fr
      1.22fr;
  }

  .systems-base{
    width:min(690px,60vw);
  }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width:780px){

  html,
  body,
  main{
    width:100%;
    max-width:100%;

    overflow-x:clip;
  }

  .shell{
    width:min(
      calc(100% - 30px),
      640px
    );
  }

  .site-header{
    height:76px;

    padding-inline:16px;
  }

  .brand img{
    width:40px;
  }

  .socials{
    gap:14px;
  }

  .socials a{
    width:34px;
    height:34px;
  }

  .socials svg{
    width:28px;
    height:28px;
  }


  /* HERO */

  .hero{
    min-height:100svh;

    padding-top:76px;
    padding-bottom:0;
  }

  .hero-grid{
    min-height:
      calc(100svh - 76px);

    grid-template-columns:1fr;

    gap:0;
  }

  .hero-bg-text{
    top:96px;

    left:-2px;

    font-size:
      clamp(56px,17vw,92px);

    line-height:.84;

    opacity:.92;

    z-index:3;
  }


  /* VIDEO FULL SCREEN */

  .hero-robot-video{
    inset:0;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    right:auto;
    bottom:auto;

    transform:none;

    object-fit:cover;

    object-position:center;

    z-index:1;
  }


  /* TEXTO */

  .hero-copy{
    grid-column:1;

    order:1;

    max-width:100%;

    padding:22px 2px 0;

    z-index:7;
  }

  .hero-copy h1{
    font-size:
      clamp(56px,17vw,86px);
  }

  .eyebrow{
    font-size:16px;
  }

  .lead{
    font-size:15px;

    max-width:100%;
  }


  /* ÓRBITA */

  .orbit-wrap{
    grid-column:1;

    order:2;

    min-height:364px;

    margin-top:18px;

    z-index:7;
  }

  .orbit{
    width:min(360px,92vw);
  }

  .orbit-node{
    width:92px;
    height:92px;
  }


  /* DIV 2 */

  .story{
    min-height:auto;
  }

  .story-grid{
    grid-template-columns:1fr;

    gap:44px;

    padding-block:56px 72px;
  }

  .portrait-card{
    width:min(100%,430px);

    margin:0 auto;

    aspect-ratio:.74;
  }

  .story-copy h2,
  .systems-copy h2{
    font-size:
      clamp(48px,13vw,72px);
  }

  .story-copy p{
    margin-top:22px;

    font-size:16px;

    line-height:1.55;
  }

  .round-action{
    width:74px;
    height:74px;
  }


  /* DIV 3 */

  .systems{
    min-height:auto;

    height:auto;

    width:100%;
    max-width:100%;

    overflow:hidden;

    padding-bottom:30px;
  }

  .systems-grid{
    grid-template-columns:minmax(0,1fr);

    width:min(
      calc(100% - 30px),
      640px
    );

    max-width:100%;

    height:auto;

    min-height:0;

    padding-block:56px 22px;

    overflow:visible;
  }

  .systems-copy{
    width:100%;
    max-width:100%;
    min-width:0;

    height:auto;

    padding-left:0;

    overflow:visible;
  }

  .systems-copy p{
    max-height:none;

    margin-top:22px;
    margin-bottom:0;

    padding:0;

    font-size:16px;

    line-height:1.55;

    white-space:normal;

    word-break:normal;

    overflow-wrap:normal;

    overflow:visible;

    opacity:1;
  }

  .systems-art{
    width:calc(100% + 30px);

    max-width:none;

    min-height:420px;

    height:auto;

    justify-content:center;

    margin-top:8px;

    margin-left:-15px;
    margin-right:-15px;

    overflow:hidden;
  }

  .systems-base{
    width:min(700px,128vw);

    max-width:none;

    flex:0 0 auto;
  }

  .systems-art__glow{
    width:min(580px,120vw);

    height:min(450px,92vw);

    right:50%;

    transform:translateX(50%);

    top:8%;
  }


  /* WHATSAPP */

  .whatsapp-float{
    width:54px;
    height:54px;

    left:18px;
    bottom:18px;
  }

  .whatsapp-float svg{
    width:30px;
    height:30px;
  }

}


/* ==========================================================
   MÓVILES PEQUEÑOS
   ========================================================== */

@media (max-width:420px){

  .shell{
    width:
      calc(100% - 24px);
  }

  .hero{
    min-height:100svh;

    padding-bottom:0;
  }

  .hero-copy h1{
    font-size:
      clamp(52px,17.5vw,74px);
  }

  .orbit-wrap{
    min-height:332px;
  }

  .orbit-node{
    width:82px;
    height:82px;
  }


  /* EL VIDEO CONTINÚA FULL HERO */

  .hero-robot-video{
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;
  }


  .systems-art{
    min-height:360px;
  }

  .systems-base{
    width:min(640px,138vw);
  }

  .site-footer p{
    font-size:10px;
  }

}


/* ==========================================================
   REDUCIR MOVIMIENTO
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }

}


/* ==========================================================
   FALLBACK PARA NAVEGADORES SIN overflow:clip
   ========================================================== */

@supports not (overflow:clip){

  html,
  body,
  main{
    overflow-x:hidden;
  }

}

@media (max-width: 768px) {
  .orbit-wrap {
    display: none;
  }
}