/* ---------- IA & desarrollo ---------- */
.ia { padding-bottom: var(--space-section); }
.ia-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px var(--gutter); align-items: end; margin-bottom: 28px; }
.ia-head .kicker { grid-column: 1 / -1; }
.ia-lede { margin: 0; color: var(--text-soft); font-weight: 300; font-size: clamp(1.02rem, 1rem + 0.3vw, 1.18rem); max-width: 44ch; }
.ia-filters { margin-bottom: 22px; }

.ia-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-flow: dense; }
.proj {
  --accent: var(--red-bright);
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px) saturate(140%);
  transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.proj[hidden] { display: none; }
.proj:hover { transform: translateY(-4px); border-color: rgba(255, 90, 95, 0.5); box-shadow: var(--glass-shadow), 0 26px 50px -28px rgba(227, 52, 63, 0.8); }
.type-web { --accent: var(--cat-mp); }
.type-app { --accent: var(--cat-inm); }
.type-juego { --accent: var(--cat-dj); }
.type-render { --accent: var(--cat-br); }
.proj.big { grid-column: span 2; grid-row: span 2; }
.proj.wide { grid-column: span 2; }

.proj-frame { position: relative; background: #000; margin: 10px 10px 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.proj-bar { display: flex; gap: 5px; padding: 8px 10px; background: rgba(255, 255, 255, 0.06); }
.proj-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.proj-frame img, .proj-frame video { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; transition: transform 900ms var(--ease-out-expo); }
.proj:hover .proj-frame img { transform: scale(1.03); }
.proj.big .proj-frame { flex: 1; display: flex; flex-direction: column; }
.proj.big .proj-frame img { flex: 1; aspect-ratio: auto; min-height: 0; object-position: left top; }

.proj-meta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.proj-type { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.proj-type::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.proj-meta h3 { margin: 8px 0 0; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.proj.big .proj-meta h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); font-weight: 700; }
.proj-client { margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--text-soft); }
.proj-desc { margin: 4px 0 0; font-size: 0.86rem; font-weight: 300; color: var(--text-mute); }
.proj-link { align-self: flex-start; margin-top: 10px; font-weight: 500; font-size: 0.88rem; text-decoration: none; color: #fff; border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color var(--duration-fast); }
.proj-link:hover { color: var(--accent); }

/* ---------- De cero a posicionado ---------- */
.cero-wrap { padding: var(--space-section) var(--gutter); }
.cero {
  position: relative; overflow: hidden;
  padding: clamp(32px, 5vw, 72px); border-radius: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(255, 90, 95, 0.55), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(143, 22, 34, 0.7), transparent 60%),
    linear-gradient(135deg, #b8222e, #6d0f19);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 40px 80px -40px rgba(227, 52, 63, 0.8);
}
.cero .kicker { color: #fff; }
.cero h2 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem); max-width: none; }
.cero h2 em { color: rgba(255, 255, 255, 0.82); }
.cero-lede { max-width: 52ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); font-weight: 300; color: rgba(255, 255, 255, 0.86); margin: 18px 0 0; }
.cero-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cero-steps li { padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); backdrop-filter: blur(14px); }
.cero-steps b { font-size: 1.8rem; font-weight: 200; }
.cero-steps h3 { margin: 18px 0 6px; font-size: 1.1rem; font-weight: 600; }
.cero-steps p { margin: 0; font-size: 0.9rem; font-weight: 300; color: rgba(255, 255, 255, 0.82); }
.cero-proof { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; background: rgba(11, 5, 6, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; backdrop-filter: blur(14px); }
.cero-proof p { margin: 0; max-width: 60ch; font-weight: 300; }
.cero-proof .cero-proof-k { flex-basis: 100%; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--red-bright); }
.cero-proof b { font-weight: 600; }
.cero-proof span { color: #fff; font-weight: 600; }
.cero-proof a:not(.btn) { color: #fff; }

@media (max-width: 1024px) {
  .ia-grid { grid-template-columns: repeat(3, 1fr); }
  .cero-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ia-head { grid-template-columns: 1fr; }
  .ia-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .proj.big { grid-row: auto; }
}
@media (max-width: 520px) {
  .ia-grid { grid-template-columns: 1fr; }
  .proj.big, .proj.wide { grid-column: auto; }
  .cero-steps { grid-template-columns: 1fr; }
}