.ai-example {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  margin-top: 1px;
  min-height: 430px;
  overflow: hidden;
  background: var(--fuchsia);
  color: #fff;
}

.ai-example img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.ai-example > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 5rem);
}

.ai-example h3 {
  margin: 1.2rem 0;
  font: 600 clamp(2.2rem, 5vw, 5.5rem)/.92 var(--display);
  letter-spacing: -.055em;
}

.ai-example p { max-width: 38rem; color: rgba(255,255,255,.78); }
.view-link { margin-top: 2rem; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.ai-example--site { background: #211b17; }
.ai-example--site > div:last-child { order: -1; }
.ai-site-mockup { width: 100%; height: 100%; min-height: 430px; margin: 0; border: 0; background: #eadfce; }
.ai-site-mockup iframe { transform: scale(.48); }
.tramite-cover { min-height: 430px; padding: clamp(2rem,5vw,5rem); display: flex; flex-direction: column; justify-content: space-between; background: #eef2f5; color: #153354; overflow: hidden; }
.tramite-cover img { width: min(86%,720px); height: auto; min-height: 0; margin: auto; object-fit: contain; mix-blend-mode: multiply; }
.tramite-kicker,.tramite-line { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tramite-line { align-self: flex-end; color: #ff5d27; }

.commerce-card { gap: 1rem; }
.commerce-media, .site-mockup {
  width: calc(100% + clamp(2.8rem, 6vw, 5.6rem));
  height: 250px;
  margin: calc(clamp(1.4rem, 3vw, 2.8rem) * -1) calc(clamp(1.4rem, 3vw, 2.8rem) * -1) 1rem;
  object-fit: cover;
  border-bottom: 1px solid var(--ink);
}

.commerce-card h3 { margin: auto 0 0; }
.commerce-card p { min-height: 4.5em; }
.commerce-status { margin-top: .6rem; }
.site-mockup { position: relative; overflow: hidden; background: #f5ead5; }
.browser-bar { position: absolute; inset: 0 0 auto; z-index: 2; height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #f4f1ea; color: #25101d; font-size: 8px; }
.browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.browser-bar b { margin-left: 5px; font-weight: 500; opacity: .65; }
.site-mockup iframe { width: 1440px; height: 900px; border: 0; pointer-events: none; transform: scale(.31); transform-origin: 0 0; }

@media (max-width: 900px) {
  .ai-example { grid-template-columns: 1fr; }
  .ai-example img { min-height: 0; max-height: 70vh; aspect-ratio: 4/3; }
  .ai-example--site > div:last-child { order: initial; }
  .ai-site-mockup { min-height: clamp(300px, 70vw, 520px); }
  .commerce-media, .site-mockup { height: clamp(260px, 62vw, 480px); }
  .site-mockup iframe { transform: scale(.4); }
}

@media (max-width: 560px) {
  .ai-example { min-height: 0; }
  .ai-example > div { padding: 2rem 1.2rem 2.5rem; }
  .commerce-card p { min-height: 0; }
}

/* Todas las portadas de Ecommerce comparten exactamente la misma caja visual. */
.commerce-media,.commerce-grid .site-mockup { flex: 0 0 auto; width: calc(100% + clamp(2.8rem, 6vw, 5.6rem)); aspect-ratio: 4/3; height: auto; min-height: 0; }
.commerce-media { max-width: none; object-position: center; }
@media (max-width:900px){.commerce-media,.commerce-grid .site-mockup{height:auto}}

/* La portada se adapta al marco real, sin escalar una página de escritorio. */
.commerce-grid .site-mockup iframe { width: 100%; height: 100%; transform: none; transform-origin: center; }

/* Origami ocupa el 100% del área visual de su tarjeta. */
.project-card:first-child .project-image { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }