:root{
  /* Fondo principal */
  --bg:#0a1220;              /* azul muy oscuro */
  --bg-deep:#060b16;         /* casi negro azulado */

  /* Paneles */
  --panel:#0f1b2f;           /* azul petróleo */
  --panel-soft:#13223a;

  /* Texto */
  --text:#eef2ff;
  --muted:#b3c0e0;

  /* Líneas */
  --line:rgba(255,255,255,.10);

  /* Acentos */
  --accent:#d4af37;          /* dorado PymeAI */
  --accent2:#6fa3ff;         /* azul tecnológico */
  --max:1100px;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(
      1400px 700px at 15% -20%,
      rgba(70, 95, 140, 0.06),
      transparent 70%
    ),
    radial-gradient(
      1000px 600px at 85% 10%,
      rgba(90, 125, 155, 0.05),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #080f1a 0%,
      #0a1220 45%,
      #0c1626 100%
    );
  color:var(--text);
  line-height:1.55;
}


a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{left:20px;top:20px;width:auto;height:auto;padding:10px 14px;background:#111a2b;border:1px solid var(--line);border-radius:12px;z-index:9999}

body > header {
  position: sticky;
  top: 0;
  z-index: 50;

  background: linear-gradient(
    to bottom,
    rgba(4, 8, 18, 0.95),
    rgba(4, 8, 18, 0.85)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* borde sutil, más oscuro */

  backdrop-filter: none;
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px;
}
.logo{
  width:34px;height:44px;border-radius:10px;
  background: linear-gradient(135deg, rgba(212,175,55,.9), rgba(122,162,255,.9));
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.brand span{font-size:15px}
.brand small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:2px}

.navlinks{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end
}
.navlinks a{
  font-size:14px;color:var(--muted);
  padding:8px 10px;border-radius:10px;border:1px solid transparent;
}
.navlinks a.active, .navlinks a:hover{
  color:var(--text);
  border-color:var(--line);
  background: rgba(255,255,255,.04);
}

.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight:700;font-size:13px;color:var(--text);
}
.btn.primary{
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(122,162,255,.14));
}
.btn.primary:hover{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.btn.ghost{background:transparent}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size:12px;font-weight:700;
}

.hero {
  padding: 40px 0 36px;   /* 🔽 menos altura */
  background: transparent;
}

.hero h1 {
  margin: 6px 0 10px;    /* 🔽 antes 14px */
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.hero .lead {
  max-width: 760px;
  line-height: 1.5;      /* 🔽 antes 1.55 */
  margin-bottom: 14px;
}
.hero .callout {
  display: none;
}

.grid{
  display:grid;gap:16px;
}
.grid.two{grid-template-columns: 1.2fr .8fr}
.grid.three{grid-template-columns: repeat(3,1fr)}

/* 📱 Tablet / móvil */
@media (max-width: 960px) {
  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

.image-break {
  margin: 32px auto 40px;
  display: flex;
  justify-content: center;
}

.image-break img {
  display: block;
  max-width: 880px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}



  .hero h1 {
    font-size: 34px;
  }
}

.card{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.015)
  );
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}



.card h2{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.card ul{margin:10px 0 0 18px;color:var(--muted)}
.card li{margin:6px 0}

.card-architecture {
  background: linear-gradient(145deg, #0b1a2e, #0f2545);
  padding: 40px;
  border-radius: 16px;
  margin: 60px 0;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.card-architecture h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #D4AF37; /* dorado */
}

.card-architecture h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: #aab7d1;
  font-weight: 500;
}

.card-architecture p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.card-architecture ul {
  margin: 20px 0;
  padding-left: 20px;
}

.card-architecture li {
  margin-bottom: 8px;
}


.section{padding:18px 0 40px}
.section h2{
  margin:0 0 12px;font-size:22px;letter-spacing:-.2px
}
.section p{margin:0 0 10px;color:var(--muted);max-width:900px}
.kicker{
  color: var(--accent); /* dorado PymeAI */
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(212,175,55,.25);
}

hr.sep{border:none;border-top:1px solid var(--line);margin:26px 0}

footer {
  background: linear-gradient(
    to top,
    rgba(4, 8, 18, 0.95),
    rgba(4, 8, 18, 0.85)
  );

  border-top: 1px solid rgba(255,255,255,.10);
  padding: 28px 0;
  color: var(--muted);
}

.footergrid{
  display:grid;grid-template-columns: 1.2fr .8fr;gap:18px;
}
.footergrid a{color:var(--muted)}
.footergrid a:hover{color:var(--text)}
@media (max-width: 960px){.footergrid{grid-template-columns:1fr}}
.footer-legal {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

.note{
  font-size:12px;color:var(--muted);
  border:1px dashed var(--line);
  padding:12px 14px;border-radius:14px;background: rgba(255,255,255,.02);
}

@media (max-width: 768px) {

  /* 1) Header más compacto */
  header {
    padding: 6px 0 !important;
    position: static !important;
    top: auto !important;
  }

  /* 2) Reducir logo y tipografía */
  header .brand img {
    height: 34px !important;
    margin-right: 8px !important;
  }

  header .brand span {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
  }

  header .brand small {
    display: none !important;
  }

  /* 3) Compactar el botón principal del header */
  header .btn.primary {
    padding: 7px 12px !important;
    font-size: 0.9rem !important;
    white-space: nowrap;
  }

}


.tablelike{
  display:grid;gap:10px
}
.row{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:14px;
}
.row h3{margin:0 0 6px;font-size:16px}
.row p{margin:0;color:var(--muted)}
.row .mini{
  margin-top:10px;
  display:grid;gap:8px;
}
.row .mini div{color:var(--muted);font-size:13px}
strong{color:var(--text)}

@media (max-width: 768px) {

  /* Reducir padding general */
  footer {
    padding: 16px 0 !important;
  }

  /* Hacer el grid vertical */
  .footergrid {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Reducir tamaño del logo */
  footer img {
    height: 36px !important;
  }

  /* Texto legal más pequeño */
  footer {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  /* Enlaces ordenados en 2 columnas */
  footer .footergrid > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    justify-items: center;
  }

  /* Enlaces más pequeños */
  footer a {
    font-size: 0.75rem;
  }

}


@media (max-width: 768px) {

  /* Header compacto */
  body > header {
    padding: 4px 0 !important;
  }

  /* Reducir logo */
  header .brand img {
    height: 65px !important;
    margin-right: 6px !important;
  }

  header .brand span {
    font-size: 0.8rem !important;
  }

  header .brand small {
    display: none !important;
  }

  /* Permitir que el menú baje */
  header .nav {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  /* Menú horizontal más pequeño */
  header .navlinks {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
  }

  /* Enlaces más compactos */
  header .navlinks a {
    padding: 4px 6px;
  }

  /* Botones más pequeños */
  header .btn.primary,
  header .btn.ghost {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
  }
/* Alinear botones correctamente en móvil */
header .btnrow {
  width: 100%;
  display: flex;
  justify-content: flex-end;  /* los manda a la derecha */
  gap: 6px;
}

}