:root{
  --bg: linear-gradient(135deg,#3b82f6 0%,#06b6d4 50%,#60a5fa 100%);
  --surface: rgba(255,255,255,.2);
  --card: rgba(255,255,255,.3);
  --text: #082f49;
  --muted: #0369a1;
  --border: rgba(255,255,255,.2);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Outfit",system-ui,-apple-system,segoe ui,roboto,ubuntu,inter,sans-serif;
  color:var(--text); background:var(--bg) fixed; background-size:200% 200%;
  animation:bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift{to{background-position:100% 100%}}
a{color:#0b1220; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1200px; margin:auto; padding:24px}
.glass{backdrop-filter: blur(12px) saturate(120%); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow)}
.site-header{margin:16px; padding:12px}
.topbar{display:flex; align-items:center; gap:16px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px}
.brand-logo{width:40px; height:40px}
.search{display:flex; gap:8px; align-items:center}
.search input{min-width:220px; padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.6); outline:none}
.nav{display:flex; flex-wrap:wrap; gap:10px; padding:10px; justify-content:center}
.nav-link{padding:10px 14px; border-radius:12px; background:linear-gradient(180deg,#ffffffbb,#ffffff70); border:1px solid var(--border); box-shadow: var(--shadow); font-weight:600; transition:.2s transform}
.nav-link:hover{transform:translateY(-1px)}
.hero{margin:16px; padding:28px}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
.hero h1{font-size:44px; margin:.2em 0}
.hero p{font-size:18px; color:var(--muted)}
.cta{display:flex; gap:12px; margin-top:16px}
.btn3d{padding:12px 18px; font-weight:700; border:0; border-radius:14px; background:linear-gradient(180deg,#fff,#e9eefc); box-shadow:0 18px 24px rgba(2,6,23,.3), inset 0 1px 0 #fff; transform:translateY(0); transition:transform .15s}
.btn3d:active{transform:translateY(2px)}
.btn3d.primary{background:linear-gradient(180deg,#22d3ee,#0ea5e9); color:white}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.badge{padding:6px 10px; border-radius:12px; background:#ffffff90; border:1px solid var(--border); font-weight:600}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{padding:18px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow)}
.card h3{margin:0 0 8px 0}
.card p{margin:0 0 12px 0; color:var(--muted)}
.card .actions{display:flex; gap:10px; flex-wrap:wrap}
.site-footer{margin:16px; padding:24px}
.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.site-footer .links{list-style:none; padding:0; margin:0}
.site-footer .links li{margin:6px 0}
.site-footer .social a{font-weight:900; font-size:20px; margin-right:8px}
.section{margin:16px; padding:18px}
.section h2{margin:.2em 0 8px 0}
.lead{font-size:18px; color:var(--muted)}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th,.table td{padding:12px 14px; text-align:left; background:#ffffffa8}
.table th{background:#ffffffd5}
.table tr{border-radius:12px}
.table tr td:first-child,.table tr th:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child,.table tr th:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery a{display:block; border-radius:12px; overflow:hidden; background:#ffffffa8; border:1px solid var(--border)}
.gallery img{aspect-ratio:4/3; object-fit:cover}
.center{display:grid; place-items:center}
.muted{color:var(--muted)}
hr.div{border:0; height:1px; background:linear-gradient(90deg,transparent,#ffffffaa,transparent); margin:18px 0}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}


/* ===== MODAL AI SERVICIOS INTELIGENTES ===== */

#ai-modal-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(15, 23, 42, 0.78); /* fondo oscuro */
  display: none;        /* oculto por defecto */
  align-items: center;  /* centrado vertical */
  justify-content: center; /* centrado horizontal */
  z-index: 9999;        /* por encima del footer y resto */
}

#ai-modal-overlay.is-visible {
  display: flex; /* se muestra cuando el JS agrega la clase */
}

.ai-modal {
  width: min(480px, 90vw);
  background: #0b1120;
  color: #e5e7eb;
  border-radius: 24px;
  padding: 24px 24px 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.85);
  position: relative;
  font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ai-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 20px;
  cursor: pointer;
}

.ai-modal-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.1);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ai-modal-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.ai-modal-desc {
  margin: 0 0 14px;
  font-size: 14px;
  color: #cbd5f5;
}

.ai-modal-extra {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.4);
  margin-bottom: 16px;
}

.ai-modal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  color: #0f172a;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.ai-modal-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.35);
}