:root{
  --bg:#070b14;
  --card:rgba(10,18,35,.55);
  --border:rgba(255,255,255,.12);
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --accent:#3bb8ff;
  --accent2:rgba(59,184,255,.18);

  --nav-h: 68px;

  /* ✅ anillo (DESKTOP) */
  --ring-radius: min(300px, 34vw);

  /* ✅ ajuste SOLO para los 2 nodos que se salen (DESKTOP) */
  --ring-inset-fix: 86px;

  /* ✅ tamaño círculos (DESKTOP) */
  --node-size: 90px;
}

*{box-sizing:border-box}
html,body{height:auto}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{color:inherit;text-decoration:none}
.site{min-height:auto}

/* NAV */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

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

  padding:14px 28px;
  border: 0;

  background: rgba(3, 127, 252, 0.007);
  backdrop-filter: blur(10px);
}

header.site{
  padding-top: var(--nav-h);
}

.brand{font-weight:800;letter-spacing:.3px}

.menu{
  display:flex;
  align-items:center;
  gap:18px;
}
.menu a{opacity:.85}
.menu a:hover{opacity:1}

.cta{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(59,184,255,.35);
  background: var(--accent2);
  font-weight:700;
}

.burger{
  display:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-size:18px;
}

/* HERO */
.hero{
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 560px;
  overflow: hidden;
  margin:0;
}

.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
}

.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.60));
}

.hero-content{
  position:relative;
  z-index:2;
  padding: clamp(18px, 4vw, 52px);
  text-align:center;
  max-width: 900px;
  margin: 0 auto;
  top: 8%;
}

.hero-content h1{
  margin:0;
  font-size: clamp(26px, 4.2vw, 64px);
  line-height:1.05;
  font-weight: 900;
  text-shadow: 0 14px 45px rgba(0,0,0,.45);
}
.hero-content h1 span{opacity:.9}

.hero-content p{
  margin: 14px auto 0;
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

.hero-actions{
  margin-top: 20px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  border:1px solid transparent;
}
.btn.primary{background: var(--accent); color:#03101c;}
.btn.primary:hover{filter: brightness(1.05);}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.btn.ghost:hover{background: rgba(255,255,255,.10);}

/* NODES */
.nodes{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.node{
  pointer-events:auto;
  position:absolute;
  left: calc(var(--x) * 1%);
  top:  calc(var(--y) * 1%);
  transform: translate(-50%, -50%);

  padding: 10px 14px;
  border-radius: 999px;

  border: 1px solid rgba(125,211,252,.45);
  background: rgba(2,6,23,.48);
  backdrop-filter: blur(8px);

  box-shadow: 0 0 22px rgba(56,189,248,.25);

  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;

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

.node:hover{
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(2,6,23,.62);
  box-shadow: 0 0 32px rgba(56,189,248,.40);
}

/* SOLUCIONES */
.solutions{
  position: relative;
  padding: 90px 0 110px;
  color: #0b1733;
  background: url("../images/solutions-background-grey-bottom-blue-gradient.png") center/cover no-repeat;
  margin:0;
}

.wrap{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.solutions__title{
  margin: 0 0 28px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: .2px;
}

.solutions__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.solution{
  background: #ffffff;
  border: 1px solid rgba(10,20,40,.08);
  border-radius: 18px;
  padding: 26px 18px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(10,20,40,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.solution:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 55px rgba(10,20,40,.12);
}

.solution__icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(59,184,255,.16);
  border: 1px solid rgba(59,184,255,.28);
  color: #0b1733;
  font-weight: 900;
  font-size: 18px;
}
.solution__text{
  font-weight: 800;
  font-size: 16px;
}

/* Responsive SOLUCIONES */
@media (max-width: 980px){
  .solutions__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .solutions{ padding: 56px 0 64px; }
  .solutions__grid{ grid-template-columns: 1fr; }
  .solution{ padding: 22px 16px; }
}

/* Responsive: mobile menu + hero */
@media (max-width: 880px){
  :root{ --nav-h: 64px; }

  .burger{display:inline-flex}

  .menu{
    position:absolute;
    right: 12px;
    top: 58px;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(7,11,20,.92);
    backdrop-filter: blur(10px);
    display:none;
    width: min(260px, calc(100vw - 24px));
  }
  .menu.open{display:flex}

  .hero{
    height: clamp(520px, 50vh, 680px);
    min-height: 520px;
  }

  .node{font-size: 13px; padding: 9px 12px;}
}

/* ===============================
   ANILLO CIRCULAR
   =============================== */

.hero-content::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);

  width: min(520px, 65vw);
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  border: 2px solid rgba(59,184,255,.85);

  box-shadow:
    0 0 35px rgba(59,184,255,.30),
    0 0 90px rgba(59,184,255,.18);

  background: none;
  z-index:-1;
  pointer-events:none;
}

/* ===============================
   NODOS SOBRE EL ANILLO CENTRAL
   =============================== */

.nodes.nodes--ring{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.node.node--ring{
  pointer-events:auto;
  position:absolute;
  left:50%;
  top:50%;
  transform:
    rotate(var(--a))
    translateX(var(--ring-radius))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px));
}

.node.node--ring:hover{
  transform:
    rotate(var(--a))
    translateX(var(--ring-radius))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px))
    scale(1.08);
}

.nodes.nodes--ring > a:nth-child(2),
.nodes.nodes--ring > a:nth-child(3){
  transform:
    rotate(var(--a))
    translateX(calc(var(--ring-radius) - var(--ring-inset-fix)))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px)) !important;
}

.nodes.nodes--ring > a:nth-child(2):hover,
.nodes.nodes--ring > a:nth-child(3):hover{
  transform:
    rotate(var(--a))
    translateX(calc(var(--ring-radius) - var(--ring-inset-fix)))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px))
    scale(1.12) !important;
}

/* ===============================
   CONEXIONES SUTILES (RED)
   =============================== */

.nodes.nodes--ring::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: min(520px, 65vw);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 20deg,
      rgba(59,184,255,.18) 20deg 21deg,
      transparent 21deg 90deg,
      rgba(59,184,255,.18) 90deg 91deg,
      transparent 91deg 160deg,
      rgba(59,184,255,.18) 160deg 161deg,
      transparent 161deg 230deg,
      rgba(59,184,255,.18) 230deg 231deg,
      transparent 231deg 360deg
    );

  filter: blur(.2px);
  opacity: .9;
  pointer-events:none;
}

/* =====================================
   BOTONES CIRCULARES TECNOLÓGICOS
   ===================================== */

.node.node--circle{
  width: var(--node-size);
  height: var(--node-size);
  padding:0;

  border-radius:50%;

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

  border: 2px solid rgba(59,184,255,.6);

  background:
    radial-gradient(circle at 30% 30%,
      rgba(59,184,255,.25),
      rgba(0,0,0,.9) 70%
    );

  backdrop-filter: blur(10px);

  box-shadow:
    0 0 18px rgba(59,184,255,.35),
    0 0 45px rgba(59,184,255,.15),
    0 15px 40px rgba(0,0,0,.7);

  transform: translate(-50%, -50%);
  transition: all .25s ease;
}

.node--circle .circle-icon{
  font-size: 26px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 6px rgba(59,184,255,.5));
}

.node--circle .circle-label{
  font-size: 11px;
  font-weight: 700;
  opacity:.85;
}

.node.node--circle:hover{
  transform: translate(-50%, -50%) scale(1.12);

  background:
    radial-gradient(circle at 30% 30%,
      rgba(59,184,255,.6),
      rgba(10,20,50,1) 75%
    );

  border-color: rgba(167,139,250,1);

  box-shadow:
    0 0 35px rgba(59,184,255,.9),
    0 0 90px rgba(59,184,255,.5),
    0 25px 70px rgba(0,0,0,.9);

  color: #ffffff;
}

/* ===== FIX: permitir mover con --dx/--dy también en node--circle + ring ===== */

.node.node--circle.node--ring{
  transform:
    rotate(var(--a))
    translateX(var(--ring-radius))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px)) !important;
}

.node.node--circle.node--ring:hover{
  transform:
    rotate(var(--a))
    translateX(var(--ring-radius))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px))
    scale(1.12) !important;
}

/* ✅ y para los 2 “inset fix” (2 y 3) pero versión circle+ring */
.nodes.nodes--ring > a.node--circle.node--ring:nth-child(2),
.nodes.nodes--ring > a.node--circle.node--ring:nth-child(3){
  transform:
    rotate(var(--a))
    translateX(calc(var(--ring-radius) - var(--ring-inset-fix)))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px)) !important;
}

.nodes.nodes--ring > a.node--circle.node--ring:nth-child(2):hover,
.nodes.nodes--ring > a.node--circle.node--ring:nth-child(3):hover{
  transform:
    rotate(var(--a))
    translateX(calc(var(--ring-radius) - var(--ring-inset-fix)))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%)
    translate(var(--dx, 0px), var(--dy, 0px))
    scale(1.12) !important;
}

/* =========================================================
   RESPONSIVE SOLO TABLET + MÓVIL (DESKTOP INTACTO)
   ========================================================= */

/* ===============================
   TABLET AJUSTADO FINO
   =============================== */
/* ===============================
   TABLET – ESFERAS + LETRA MÁS GRANDE
   =============================== */

@media (max-width: 520px){

  /* ... lo tuyo igual ... */

  /* IA: subir un poco y a la izquierda */
  .nodes.nodes--ring > a:nth-child(1){
    --a: -138deg !important;
    --dx: 20px;
    --dy: -89px;
  }

  /* Software: si está perfecto no toques */
  .nodes.nodes--ring > a:nth-child(2){
    --a: -20deg !important;
    --dx: -10px;
    /* --dx: 0px; --dy: 0px; */
  }

  /* Impresión: perfecto -> no toques */
  .nodes.nodes--ring > a:nth-child(3){
    --a: 200deg !important;
     --dx: 5px;
  }

  /* Apps: subir bastante */
  .nodes.nodes--ring > a:nth-child(4){
    --a: 120deg !important;
    --dx: 210px;
    --dy: -320px;
  }
}
/* pequeño glow elegante */
.brand-es::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle,
    rgba(59,184,255,.35),
    transparent 70%);
  filter: blur(8px);
  z-index:-1;
}

/* ===============================
   MÓVIL: ajustes tipografía + botones (sin tocar desktop)
   =============================== */
/* ===============================
   MÓVIL: ajustes finales hero
   =============================== */
@media (max-width: 520px){

  :root{
    --node-size: 60px;                 /* 🔥 MÁS PEQUEÑAS */
    --ring-radius: min(170px, 44vw);   /* ajustamos el círculo */
    --ring-inset-fix: 36px;
  }

  .hero{ min-height: 520px; }

  /* Botones en columna más compactos */
  .hero-actions{
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }

  .btn{
    width: 160px;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 9px;
  }

  /* Tipografía dentro de los círculos más pequeña */
  .node--circle .circle-icon{
    font-size: 16px;
    margin-bottom: 2px;
  }

  .node--circle .circle-label{
    font-size: 8px;
  }

  /* Mantienes tus ajustes de posición si los tienes */
}

/* ===== FIX DEFINITIVO: ES siempre en azul (todas las resoluciones) ===== */
.brand-es{
  color: var(--accent) !important;
  position: relative;
}

.brand-es::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle,
    rgba(59,184,255,.35),
    transparent 70%);
  filter: blur(8px);
  z-index:-1;
}

/* ===== MÓVIL: texto + botones más pequeños (sin tocar desktop) ===== */
@media (max-width: 520px){

  /* “Conectamos…” un poco más pequeño */
  .hero-content p{
    font-size: 13px;
  }

  /* Botones: más pequeños y en columna */
  .hero-actions{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }

  .btn{
    width: 155px;        /* un pelín más pequeño */
    padding: 6px 8px;    /* más compacto */
    font-size: 11px;     /* más pequeño */
    border-radius: 9px;
  }
}

@media (min-width: 521px) and (max-width: 880px){

  :root{
    --node-size: 92px;
    --ring-radius: min(255px, 44vw);
    --ring-inset-fix: 72px;
  }

  .hero{ min-height: 560px; }

  .hero-content p{ font-size: 16px; }

  .hero-actions{
    gap: 14px;
    margin-top: 18px;
  }

  .btn{
    padding: 11px 16px;
    font-size: 15px;
    border-radius: 13px;
  }

  .node--circle .circle-icon{
    font-size: 26px;
    margin-bottom: 5px;
  }

  .node--circle .circle-label{
    font-size: 12px;
    font-weight: 800;
  }

  /* Ajustes solo tablet */
  .nodes.nodes--ring > a:nth-child(1){
    --a: -138deg !important;
    --dx: -40px;
    --dy: -59px;
  }

  .nodes.nodes--ring > a:nth-child(2){
    --a: -20deg !important;
    --dx: 60px;
    --dy: 70px;
  }

  .nodes.nodes--ring > a:nth-child(3){
    --a: 200deg !important;
    --dx: -40px;
    --dy: 80px;
  }

  .nodes.nodes--ring > a:nth-child(4){
    --a: 120deg !important;
    --dx: 360px;
    --dy: -450px;
  }
}



/* ===============================
   LOGO PEQUEÑO Y ELEGANTE
   =============================== */

.brand{
  display:flex;
  align-items:center;
}

.brand img{
  height: 40px;   /* 🔥 Desktop pequeño */
  width: auto;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 880px){
  .brand img{
    height: 40px;
  }
}

/* Móvil */
@media (max-width: 520px){
  .brand img{
    height: 30px;
  }
}