/* ===========================
   Variables, base y utilidades
   =========================== */

:root{
  --bg:#0a0e17;                 /* Fondo principal (azul muy oscuro) */
  --bg-2:#1a1f2e;               /* Fondo de tarjetas/segundas capas */
  --indigo:#6366f1;             /* Color acento 1 (índigo) */
  --cyan:#06b6d4;               /* Color acento 2 (cian) */
  --text:#e2e8f0;               /* Color de texto principal (gris muy claro) */
  --muted:#94a3b8;              /* Color de texto secundario (gris medio) */
  --radius:16px;                /* Radio de borde por defecto (cards, etc.) */
  --radius-sm:12px;             /* Radio de borde más chico */
  --shadow:0 10px 30px rgba(0,0,0,.35);      /* Sombra fuerte para destacar */
  --shadow-soft:0 6px 20px rgba(0,0,0,.25);  /* Sombra suave para hover y profundidad */
  --maxw:1200px;                /* Ancho máximo de contenido */
  --grad-2:radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.25), rgba(6,182,212,.08) 40%, transparent 70%),
            radial-gradient(1000px 600px at 100% 0%, rgba(6,182,212,.18), transparent 60%); /* Fondo con brillos/acento */
}

/* Reset mínimo y base tipográfica */
*{box-sizing:border-box}         /* Incluye borde y padding en el tamaño total del elemento */
html{scroll-behavior:smooth}     /* Scroll suave para anclas (#sección) */
body{
  margin:0;                      /* Sin margen por defecto del body */
  background:var(--bg);          /* Fondo general del sitio */
  color:var(--text);             /* Color de texto por defecto */
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif; /* Tipografía */
  line-height:1.6;               /* Altura de línea base para legibilidad */
}
a{color:inherit;text-decoration:none} /* Links heredan color y sin subrayado por defecto */
img{max-width:100%;display:block}     /* Imágenes responsivas y sin espacios fantasma */

/* Contenedor y espaciados seccionales */
.container{max-width:var(--maxw);margin-inline:auto;padding:0 20px} /* Centra y limita ancho */
section{padding:80px 0}          /* Espaciado vertical entre secciones */

/* ===========================
   Utilitarias (helpers)
   =========================== */

.center{text-align:center}       /* Centra texto */
.uppercase{text-transform:uppercase} /* Pone en mayúsculas */
.mt-0{margin-top:0}              /* Atajo: margen superior 0 */
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mt-16{margin-top:16px}
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.mb-6{margin-bottom:6px}
.mb-8{margin-bottom:8px}
.m-0{margin:0}
.justify-center{justify-content:center} /* Alineación horizontal en flex */
.justify-end{justify-content:flex-end}
.items-center{align-items:center}       /* Alineación vertical en flex */
.grid{display:grid}                      /* Activa layout grid */
.gap-10{gap:10px}                        /* Separación entre hijos (grid/flex) */
.rounded{border-radius:14px}             /* Bordes redondeados estándar */
.mb-12{margin-bottom:12px}

/* ===========================
   NAV (barra superior)
   =========================== */

.nav{
  position:sticky;              /* Se “pega” al top al scrollear */
  top:0;                        /* Se pega al borde superior */
  z-index:50;                   /* Sobrepone por encima del contenido */
  background:color-mix(in oklab, var(--bg), black 10%); /* Fondeo sutil más oscuro */
  backdrop-filter:blur(8px);    /* Desenfoque del fondo (efecto glass) */
  border-bottom:1px solid rgba(255,255,255,.06); /* Línea inferior tenue */
}
.nav .wrap{
  display:flex;                 /* Layout horizontal para logo/menú */
  align-items:center;           /* Centra verticalmente */
  justify-content:space-between;/* Logo a la izquierda / menú a la derecha */
  gap:16px;                     /* Espaciado entre elementos */
  padding:16px 0;               /* Altura de la barra */
}
.brand{display:flex;align-items:center;gap:14px} /* Contenedor del logo */
.brand img{height:60px;width:auto}               /* Tamaño fijo de logo */
.menu{display:flex;align-items:center;gap:22px}  /* Menú horizontal */
.menu a{color:var(--muted);font-weight:500}      /* Items del menú con color tenue */
.menu a:hover{color:var(--text)}                 /* Hover: texto claro */

/* Botones */
.btn{
  display:inline-flex;          /* Botón como flex para icono+texto */
  align-items:center;           /* Centrado vertical */
  gap:10px;                     /* Espacio entre icono y texto */
  padding:12px 18px;            /* Área clickeable cómoda */
  border-radius:999px;          /* Forma píldora */
  font-weight:600;              /* Peso de texto */
  border:1px solid transparent; /* Borde “placeholder” para transiciones */
  transition:transform .1s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; /* Suaviza interacciones */
}
.btn-primary{
  background:linear-gradient(135deg,var(--indigo),var(--cyan)); /* Degradé de acento */
  color:#fff !important;         /* Texto blanco asegurado */
  box-shadow:0 6px 20px rgba(99,102,241,.35); /* Sombra luminosa */
}
.btn-primary:hover{transform:translateY(-1px)} /* Efecto “levitar” al hover */
.btn-ghost{
  background:rgba(255,255,255,.04); /* Fondo sutil translúcido */
  border-color:rgba(255,255,255,.08);/* Borde suave */
}
.btn-ghost:hover{background:rgba(255,255,255,.07)} /* Hover más visible */

/* Hamburguesa (sólo móvil) */
.hamb{
  display:none;                               /* Oculta en desktop */
  border:1px solid rgba(255,255,255,.1);      /* Borde sutil */
  border-radius:10px;                         /* Bordes redondeados */
  padding:10px;                               /* Área clickeable */
  background:rgba(255,255,255,.03);           /* Fondo tenue */
}
.hamb svg{width:22px;height:22px}             /* Tamaño del ícono hamburguesa */

/* Breakpoint: <= 900px (tablet/móvil) */
@media(max-width:900px){
  .menu{display:none}                         /* Esconde menú horizontal */
  .hamb{display:inline-flex}                  /* Muestra botón hamburguesa */
  .menu.mobile{                               /* Menú clonado para móvil */
    display:flex;flex-direction:column;gap:12px; /* Items apilados */
    padding:14px;                             /* Padding del panel */
    border:1px solid rgba(255,255,255,.06);   /* Borde del panel */
    background:rgba(10,14,23,.95);           /* Fondo casi sólido */
    border-radius:12px;                       /* Bordes redondeados */
    position:absolute;right:20px;top:64px;    /* Posición flotante bajo la nav */
    box-shadow:var(--shadow-soft);            /* Sombra suave */
  }
}

/* ===========================
   HERO (cabecera principal)
   =========================== */

.hero{
  position:relative;                          /* Para ubicar el adorno .circuit */
  overflow:hidden;                            /* Esconde overflow del adorno */
  padding:110px 0;                            /* Altura visual de la sección */
  background:                                  /* Fondo con degradé y brillos */
    linear-gradient(180deg, rgba(26,31,46,.2), transparent 50%), 
    var(--grad-2);
}
.hero .grid{
  display:grid;                               /* Layout en dos columnas */
  grid-template-columns:1.25fr 1fr;           /* Texto más ancho que el aside */
  gap:36px;                                   /* Separación entre columnas */
  align-items:center;                         /* Alinea verticalmente */
}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}} /* En móvil, 1 columna */
.kicker{
  color:var(--cyan);                          /* Acento cian */
  font-weight:700;                            /* Destacado */
  letter-spacing:.3px;                        /* Espaciado leve */
  text-transform:uppercase;                   /* Mayúsculas */
  font-size:.85rem;                           /* Tamaño moderado */
}
h1{
  font-size:clamp(2rem, 1rem + 4vw, 3.2rem);  /* Escala fluida del título */
  line-height:1.1;                            /* Título bien compacto */
  margin:.4rem 0 1rem;                        /* Separaciones verticales */
}
.lead{color:var(--muted);font-size:1.1rem}    /* Párrafo introductorio tenue */
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} /* Botonera */

/* Tarjeta destacada del hero */
.hero-card{
  border:1px solid rgba(255,255,255,.07);     /* Borde muy tenue */
  background:linear-gradient(145deg, rgba(26,31,46,.6), rgba(26,31,46,.35)); /* Fondo translúcido */
  padding:22px;                               /* Espaciado interno */
  border-radius:var(--radius);                /* Bordes redondeados globales */
  box-shadow:var(--shadow);                   /* Sombra marcada */
}
.chip{
  display:inline-flex;align-items:center;gap:8px; /* Píldora de info */
  padding:6px 10px;                           /* Tamaño compacto */
  border-radius:999px;                        /* Forma píldora */
  background:rgba(99,102,241,.12);            /* Fondo con tono índigo */
  border:1px solid rgba(99,102,241,.3);       /* Borde a juego */
  color:#c7c9ff;                              /* Texto claro azulado */
  font-weight:600;font-size:.9rem;            /* Peso/size medio */
}
.hero-card-title{margin:12px 0 6px}           /* Separación del título en card */
.lead-sm{font-size:1rem}                      /* Variante de lead más chica */

/* Títulos y descripciones seccionales */
.section-title{font-size:clamp(1.6rem,1rem+2.2vw,2.2rem);margin:0 0 12px} /* Títulos adaptativos */
.section-desc{color:var(--muted);max-width:900px;margin:0 0 28px}         /* Párrafos de sección */

/* Grid de tarjetas reutilizable */
.cards{
  display:grid;                               /* Layout en grilla */
  grid-template-columns:repeat(3,1fr);        /* 3 columnas en desktop */
  gap:20px;                                   /* Separación entre tarjetas */
}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}} /* 2 columnas tablet */
@media(max-width:640px){.cards{grid-template-columns:1fr}}             /* 1 columna móvil */
.card{
  background:var(--bg-2);                     /* Fondo de tarjeta */
  border:1px solid rgba(255,255,255,.06);     /* Borde sutil */
  border-radius:var(--radius);                /* Bordes redondeados */
  padding:22px;                               /* Espaciado interno */
  box-shadow:var(--shadow-soft);              /* Sombra suave */
}
.card h3{margin:0 0 8px}                      /* Separación título en card */
.card p{margin:0;color:var(--muted)}          /* Párrafo en card con tono secundario */
.icon{width:24px;height:24px;flex:0 0 24px;opacity:.9} /* Iconos base */
.row{display:flex;gap:12px;align-items:flex-start}     /* Filas con íconos+texto */

/* ===========================
   Nosotros + métrica (números)
   =========================== */

.nosotros{
  background:
    linear-gradient(180deg, rgba(99,102,241,.08), transparent), /* Velo índigo */
    radial-gradient(600px 200px at 10% 20%, rgba(6,182,212,.12), transparent 60%); /* Brillo cian */
}

/* Centrado exclusivo para la sección "Nosotros" */
#nosotros .section-title {
  text-align: center;          /* centra el título NOSOTROS */
  text-transform: uppercase;   /* asegura que esté todo en mayúsculas */
}

#nosotros .section-desc {
  text-align: center;          /* centra el texto debajo */
  margin: 0 auto;              /* centra el bloque dentro del contenedor */
  max-width: 900px;            /* mantiene el ancho cómodo de lectura */
}

#nosotros .section-desc {
  text-align: center;     /* centra el texto */
  margin: 0 auto 40px;    /* agrega 40px de espacio abajo */
  max-width: 900px;       /* mantiene ancho cómodo */
}

.nums{
  display:grid;grid-template-columns:repeat(4,1fr); /* 4 números en fila */
  gap:16px;margin-top:24px;                          /* Separaciones */
}
@media(max-width:900px){.nums{grid-template-columns:repeat(2,1fr)}} /* 2 por fila en móvil */
.num-card{
  background:rgba(26,31,46,.7);             /* Fondo translúcido sobre bg */
  border:1px solid rgba(255,255,255,.06);    /* Borde tenue */
  border-radius:14px;                        /* Bordes suaves */
  padding:18px;                              /* Espacio interno */
  text-align:center;                         /* Centra número + etiqueta */
}
.num{
  font-size:2rem;font-weight:800;            /* Número grande y pesado */
  background:linear-gradient(90deg,var(--indigo),var(--cyan)); /* Degradé de texto */
  -webkit-background-clip:text;              /* Clip del fondo al texto (webkit) */
  background-clip:text;                      /* Clip estándar */
  color:transparent;                         /* Hace visible el degradé en el texto */
}
.num-label{color:var(--muted)}               /* Etiqueta del número con tono secundario */

/* Alineados específicos del bloque NOSOTROS */
#nosotros .section-title{ text-align:center;text-transform:uppercase; } /* Centrado y mayúsculas del h2 */
#nosotros .section-desc{ text-align:center; }                            /* Centrado del párrafo */
.stats-title{margin:26px 0 8px}                                          /* Margen del subtítulo “Nuestra huella…” */

/* ===========================
   Plataforma (texto + aside)
   =========================== */

.plat-grid{
  display:grid;                               /* Dos columnas: contenido + aside */
  grid-template-columns:1.2fr 1fr;            /* Columna principal más ancha */
  gap:26px;                                   /* Espacio entre columnas */
  align-items:start;                           /* Alinea arriba */
}
@media(max-width:1000px){.plat-grid{grid-template-columns:1fr}} /* En móvil, 1 columna */
.feature{display:flex;gap:12px;align-items:flex-start}          /* Item con ícono + texto */
.feature svg{width:22px;height:22px;margin-top:2px}             /* Tamaño de icono en features */

/* Ajustes visuales del aside dentro de plat-grid */
.plat-grid aside.card h3.mt-0{margin-top:0}   /* El título del aside sin margen arriba */
.plat-grid aside.card img.rounded{width:100%;height:auto} /* Imagen del aside responsiva */

/* ===========================
   Interacciones (Beneficios)
   =========================== */

.beneficios .cards .card{
  transition:transform .15s ease, box-shadow .2s ease; /* Suaviza hover */
}
.beneficios .cards .card:hover{
  transform:translateY(-3px);                    /* Levanta la tarjeta */
  box-shadow:0 14px 40px rgba(0,0,0,.35);        /* Sombra más profunda */
}

/* Insignias (badges) */
.badge{
  display:inline-block;                          /* Se comporta como etiqueta */
  font-size:.75rem;font-weight:700;              /* Letra pequeña y fuerte */
  color:#dbeafe;                                 /* Texto en celeste muy claro */
  background:rgba(99,102,241,.18);               /* Fondo con tono índigo translúcido */
  border:1px solid rgba(99,102,241,.35);         /* Borde a juego */
  padding:4px 8px;                               /* Relleno compacto */
  border-radius:999px;                           /* Píldora */
  margin-bottom:8px;                             /* Separación inferior */
}

/* ===========================
   Footer (CTA + meta)
   =========================== */

.footer-cta{
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(6,182,212,.12)); /* Degradé suave */
  border-top:1px solid rgba(255,255,255,.06);                                    /* Línea superior */
}
.footer-cta .wrap{
  display:grid;                               /* Título/texto + botones */
  grid-template-columns:1.2fr auto;           /* Texto más ancho que la columna de CTA */
  gap:20px;                                   /* Separación entre columnas */
  align-items:center;                         /* Centrado vertical */
}
@media(max-width:900px){.footer-cta .wrap{grid-template-columns:1fr}} /* En móvil, 1 columna */
.pt-28{padding-top:28px}                      /* Espaciado superior de la sección */
.footer-logo{height:34px;width:auto;opacity:.9} /* Logo pequeño en el footer */
.footer-meta{
  padding:20px 0 40px;                        /* Espaciado alrededor del meta */
  color:var(--muted);                         /* Texto tenue */
  font-size:.9rem;                            /* Tamaño discreto */
}

/* Redes sociales (íconos redondos) */
.socials{
  display:flex;                                /* Íconos en fila */
  gap:12px;                                    /* Separación entre iconos */
  flex-wrap:wrap;                              /* Permite salto de línea si no entran */
  margin-top:10px;                             /* Separación del texto superior */
  align-items:center;                          /* Alinea verticalmente */
}
.socials a{
  display:inline-flex;                         /* Centra el SVG dentro */
  align-items:center;justify-content:center;   /* Centrado perfecto */
  width:40px;height:40px;                      /* Botón circular */
  border:1px solid rgba(255,255,255,.08);      /* Borde suave */
  border-radius:999px;                         /* Forma circular/píldora */
  background:rgba(255,255,255,.03);            /* Fondo translúcido */
}
.socials a:hover{background:rgba(255,255,255,.06)} /* Hover más visible */

/* ===========================
   Adorno SVG “circuito”
   =========================== */

.circuit{
  position:absolute;                           /* Posicionado respecto al hero */
  inset:auto 0 -120px 0;                       /* Pegado abajo, a todo el ancho */
  height:220px;                                /* Alto del adorno */
  opacity:.25;                                 /* Transparencia para no distraer */
  pointer-events:none;                         /* No bloquea clics/scroll */
}
.circuit svg{width:100%;height:100%}           /* SVG ocupa todo el contenedor */

/* ===========================
   Rejilla de imágenes (Nosotros)
   =========================== */

.grid-imgs{
  display:grid;                                /* Grilla para 3 imágenes */
  grid-template-columns:repeat(3,1fr);         /* 3 columnas iguales */
  gap:16px;                                    /* Separación entre imágenes */
  margin-top:20px;                             /* Separación del bloque anterior */
}
@media(max-width:900px){.grid-imgs{grid-template-columns:1fr}} /* En móvil, 1 por fila */
.img-soft{
  border-radius:14px;                          /* Bordes suaves */
  border:1px solid rgba(99,102,241,.35);       /* Borde con tono índigo */
  box-shadow:var(--shadow-soft);               /* Sombra suave para relieve */
}
.img-soft.cyan{border-color:rgba(6,182,212,.35)} /* Variante de borde en cian */

/* ===========================
   Cards con imagen (Proyectos)
   =========================== */

.card > img.thumb{
  width:100%;                                  /* Ocupa ancho de la card */
  height:180px;                                /* Alto fijo para uniformidad */
  object-fit:cover;                            /* Recorta sin deformar */
  border-radius:12px;                          /* Bordes redondeados de la miniatura */
  margin-bottom:10px;                          /* Separación del contenido de la card */
}