/* ---------- Sección Inteligencia Artificial ---------- */
.ia-section { position: relative; overflow: hidden; }
.ia-section::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 520px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(64,224,208,.16), transparent 60%);
  animation: ia-aura 12s ease-in-out infinite alternate;
}
@keyframes ia-aura { from { transform: translateX(-12%) } to { transform: translateX(12%) } }

/* Cinta en movimiento */
.ia-marquee { position: relative; display: grid; gap: 12px; margin: 8px 0 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ia-row { display: flex; width: max-content; gap: 12px; animation: ia-scroll 38s linear infinite; }
.ia-row.rev { animation-direction: reverse; animation-duration: 44s; }
.ia-marquee:hover .ia-row { animation-play-state: paused; }
@keyframes ia-scroll { to { transform: translateX(-50%) } }
.ia-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--border); font: 600 .9rem var(--font-head);
  color: var(--text); white-space: nowrap; box-shadow: var(--shadow); }
.ia-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px var(--gold); }

/* Pestañas */
.ia-tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 6px; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow); }
.ia-tab { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 10px 18px;
  border-radius: 999px; font: 600 .92rem var(--font-head); color: var(--text-muted); transition: color .3s; }
.ia-tab[aria-selected="true"] { color: #06302C; }
.ia-tab .ia-count { font-size: .75rem; opacity: .7; margin-left: 4px; }
.ia-indicator { position: absolute; z-index: 0; top: 6px; left: 6px; height: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #A8F0E8); box-shadow: 0 6px 20px rgba(64,224,208,.45);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s; }

/* Tarjetas */
.ia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ia-js .ia-panel[hidden] { display: none; }
.ia-card { position: relative; padding: 20px; border-radius: 16px; background: var(--card-bg);
  border: 1px solid var(--border); overflow: hidden; isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ia-card::before { /* brillo que sigue al cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(64,224,208,.22), transparent 60%); }
.ia-card::after { /* borde luminoso giratorio */
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, var(--gold) 75%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.5px; animation: ia-spin 3s linear infinite; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ia-spin { to { --ang: 360deg } }
.ia-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(64,224,208,.18); }
.ia-card:hover::before, .ia-card:hover::after { opacity: 1; }
.ia-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ia-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font: 800 1rem var(--font-head); color: #fff; background: linear-gradient(135deg, var(--gold), var(--blue));
  box-shadow: 0 6px 16px rgba(64,224,208,.3); }
.ia-card h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.ia-maker { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ia-card p { margin: 0; font-size: .92rem; color: var(--text-muted); line-height: 1.5; }

/* Entrada escalonada al cambiar de pestaña */
.ia-panel.is-in .ia-card { animation: ia-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes ia-in { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }

.ia-hint { display: none; }
@media (max-width: 600px) {
  .ia-tabs { border-radius: 18px; }
  .ia-tab { padding: 8px 12px; font-size: .85rem; }
  .ia-indicator { border-radius: 14px; }
  .ia-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .ia-grid::-webkit-scrollbar { display: none; }
  .ia-card { flex: 0 0 80%; scroll-snap-align: center; }
  .ia-hint { display: block; text-align: center; font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-row, .ia-section::before, .ia-card::after, .ia-panel.is-in .ia-card { animation: none; }
}

/* Menú en una sola línea (se agregó la opción IA) */
.brand, .nav a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1099px) {
  .nav:not(.open) { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 1100px) and (max-width: 1280px) { .nav { gap: 16px; } .nav a { font-size: .9rem; } }