.demo-showcase {
  max-width: 1360px;
  margin: 0 auto;
  padding: 104px 5vw 110px;
  color: #111;
  border-top: 1px solid #d8d7d2;
  border-bottom: 1px solid #d8d7d2;
}

.demo-showcase * { box-sizing: border-box; }

.demo-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
  gap: 45px;
  align-items: end;
  padding-bottom: 32px;
}

.demo-eyebrow,
.demo-stage-label,
.demo-insight-kicker,
.demo-case-sector {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.demo-eyebrow { margin: 0 0 18px; }
.demo-heading h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.3rem, 6vw, 6rem);
  line-height: .98;
  letter-spacing: -.085em;
}
.demo-subtitle { margin: 0 0 5px; max-width: 450px; font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.5; }

.demo-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 28px;
  border-bottom: 1px solid #d8d7d2;
}
.demo-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 64px;
  padding: 15px 4px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #6f6f6a;
  font: 700 1rem "Space Grotesk", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.demo-tab:hover { color: #111; }
.demo-tab[aria-selected="true"] { color: #111; border-bottom-color: #111; }
.demo-tab:focus-visible,
.demo-switch-button:focus-visible,
.demo-change-button:focus-visible { outline: 3px solid #b8ea28; outline-offset: 3px; }
.demo-tab-number { font-size: .81rem; color: #80952f; }
.demo-tab-text { overflow-wrap: anywhere; }

.demo-case-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin: 0 0 22px; }
.demo-case-name { margin: 0; font: 700 clamp(1.3rem, 2vw, 1.75rem) "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.demo-case-sector { color: #6f6f6a; text-align: right; }
.demo-layout { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(255px, .72fr); gap: 22px; align-items: stretch; }
.demo-stage { min-width: 0; }
.demo-stage-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 48px; margin-bottom: 12px; }
.demo-stage-label { color: #5b5f52; }
.demo-switcher { display: flex; gap: 3px; padding: 3px; border: 1px solid #d8d7d2; border-radius: 100px; background: #eaeae7; }
.demo-switch-button {
  min-height: 35px;
  padding: 0 15px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #656965;
  font: 700 .75rem "Space Grotesk", sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.demo-switch-button[aria-pressed="true"] { background: #111; color: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.17); }

.demo-frame {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: 36px auto;
  overflow: hidden;
  border: 1px solid #cdcec9;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(0,0,0,.10);
}
.demo-frame-top {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 15px;
  border-bottom: 1px solid #dbdcd8;
  background: #f1f2ef;
}
.demo-frame-dots { display: flex; gap: 5px; }
.demo-frame-dots span { width: 7px; height: 7px; border-radius: 50%; background: #b7bab4; }
.demo-frame-address { color: #7b7e78; font-size: .68rem; letter-spacing: .01em; }

.demo-website {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(7px) scale(.995);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.demo-website.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.demo-website-nav { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 28px; border-bottom: 1px solid #e5e5e0; background: #fff; }
.demo-website-brand { font: 800 1.1rem "Space Grotesk",sans-serif; letter-spacing: -.07em; }
.demo-website--after .demo-website-brand::after { content:'.'; color:#83ad10; }
.demo-website-links { display: flex; gap: 20px; color: #575b55; font-size: .71rem; font-weight: 700; white-space: nowrap; }
.demo-website-menu { display: none; font-size: 1.1rem; }
.demo-website-hero { position: relative; display: flex; align-items: stretch; flex: 1; min-height: 430px; isolation: isolate; overflow: hidden; }
.demo-website-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(248,248,244,.98) 0%, rgba(248,248,244,.95) 29%, rgba(248,248,244,.70) 48%, rgba(248,248,244,.08) 77%); pointer-events: none; }
.demo-website--before .demo-website-hero::after { background: linear-gradient(90deg, rgba(241,241,237,.98) 0%, rgba(241,241,237,.94) 29%, rgba(241,241,237,.70) 48%, rgba(241,241,237,.13) 77%); }
.demo-website-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: min(63%, 520px); min-width: 0; padding: 38px 24px 42px 36px; }
.demo-website-eyebrow { margin-bottom: 20px; color: #747972; font: 800 .66rem "Space Grotesk",sans-serif; letter-spacing: .13em; }
.demo-website--after .demo-website-eyebrow { color: #5c770e; }
.demo-website-title { margin: 0 0 17px; font: 700 clamp(1.55rem, 2.3vw, 2.55rem)/1.06 "Space Grotesk",sans-serif; letter-spacing: -.07em; overflow-wrap: anywhere; }
.demo-website--before .demo-website-title { color: #50534e; }
.demo-website--after .demo-website-title { color: #111; }
.demo-website-description { margin: 0 0 23px; max-width: 390px; font-size: .83rem; line-height: 1.52; overflow-wrap: anywhere; }
.demo-website--before .demo-website-description { color: #767b75; }
.demo-website--after .demo-website-description { color: #343734; }
.demo-website-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; max-width: 100%; padding: 0 15px; font: 800 .7rem "Space Grotesk",sans-serif; overflow-wrap: anywhere; }
.demo-website--before .demo-website-cta { color: #5f645f; border: 1px solid #abb0a9; background: #fafaf8; }
.demo-website--after .demo-website-cta { color: #111; background: #c6fa32; border: 1px solid #111; box-shadow: 0 4px 0 #111, 0 9px 18px rgba(0,0,0,.15); }
.demo-website--after .demo-website-cta::after { content:'↗'; margin-left: 13px; font-size: 1rem; }
.demo-website-visual { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: #deded9; }
.demo-website-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.demo-website--before .demo-website-visual img { filter: grayscale(.35) saturate(.65); }
.demo-website--after .demo-website-visual img { filter: saturate(1.03); }
.demo-mark { color: inherit; background: linear-gradient(transparent 59%, #d4ed91 59%); border-bottom: 1px dashed #66890c; }

.demo-insight {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 60px;
  padding: 32px 27px 24px;
  border-radius: 3px;
  background: #111;
  color: #fff;
}
.demo-insight-kicker { color: #c6fa32; }
.demo-insight h3 { margin: auto 0 17px; font: 700 clamp(1.65rem, 2.25vw, 2.25rem)/1.11 "Space Grotesk",sans-serif; letter-spacing: -.06em; overflow-wrap: anywhere; }
.demo-insight p { margin: 0 0 30px; color: #dededb; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; }
.demo-change-button {
  width: 100%;
  min-height: 49px;
  border: 1px solid #c6fa32;
  background: #c6fa32;
  color: #111;
  font: 800 .84rem "Space Grotesk",sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 #789c16, 0 10px 16px rgba(0,0,0,.2);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.demo-change-button:hover { background: #d8ff7a; transform: translateY(-2px); box-shadow: 0 6px 0 #789c16, 0 13px 19px rgba(0,0,0,.24); }
.demo-change-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #789c16, 0 5px 8px rgba(0,0,0,.16); }
.demo-note { margin: 18px 0 0; color: #787b75; font-size: .74rem; line-height: 1.4; }
.demo-panel.is-entering { animation: demo-panel-in .22s ease both; }
@keyframes demo-panel-in { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1050px) {
  .demo-layout { grid-template-columns: minmax(0,1.65fr) minmax(230px,.72fr); gap: 15px; }
  .demo-website-nav { padding: 0 20px; }
  .demo-website-links { gap: 10px; }
  .demo-website-copy { padding-left: 24px; }
  .demo-insight { padding: 26px 20px 20px; }
}

@media (max-width: 800px) {
  .demo-showcase { padding-top: 76px; padding-bottom: 78px; }
  .demo-heading { grid-template-columns: 1fr; gap: 20px; }
  .demo-heading h2 { max-width: 680px; font-size: clamp(2.9rem, 9vw, 4.4rem); }
  .demo-subtitle { max-width: 680px; }
  .demo-layout { grid-template-columns: 1fr; gap: 19px; }
  .demo-insight { margin-top: 0; min-height: 0; padding: 25px; }
  .demo-insight h3 { margin: 24px 0 12px; }
  .demo-insight p { margin-bottom: 23px; }
  .demo-change-button { max-width: 320px; }
}

@media (max-width: 560px) {
  .demo-showcase { padding: 68px 22px 74px; }
  .demo-tabs { gap: 8px; }
  .demo-tab { display: block; min-height: 69px; padding: 11px 3px; font-size: .75rem; line-height: 1.2; }
  .demo-tab-number { display: block; margin-bottom: 5px; }
  .demo-case-meta { display: block; margin-bottom: 20px; }
  .demo-case-name { font-size: 1.3rem; }
  .demo-case-sector { display: block; margin-top: 8px; text-align: left; }
  .demo-stage-top { display: block; }
  .demo-stage-label { display: block; margin: 0 0 12px; }
  .demo-switcher { width: max-content; max-width: 100%; margin: 0 0 14px; }
  .demo-website-nav { min-height: 53px; padding: 0 17px; }
  .demo-website-links { display: none; }
  .demo-website-menu { display: block; }
  .demo-website-hero { min-height: 500px; }
  .demo-website-hero::after { background: linear-gradient(180deg, rgba(248,248,244,.98) 0%, rgba(248,248,244,.97) 53%, rgba(248,248,244,.68) 73%, rgba(248,248,244,.05) 100%); }
  .demo-website--before .demo-website-hero::after { background: linear-gradient(180deg, rgba(241,241,237,.98) 0%, rgba(241,241,237,.96) 53%, rgba(241,241,237,.68) 73%, rgba(241,241,237,.07) 100%); }
  .demo-website-copy { width: 100%; justify-content: flex-start; padding: 26px 22px 125px; }
  .demo-website-title { font-size: clamp(1.85rem, 7vw, 2.3rem); }
  .demo-website-description { font-size: .84rem; }
  .demo-website-visual img { object-position: 70% center; }
  .demo-insight { padding: 24px 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-website, .demo-tab, .demo-switch-button, .demo-change-button, .demo-panel.is-entering { transition: none; animation: none; }
}

/* Solo la comparativa de moda: la prenda queda visible en ambas versiones. */
.demo-website--fashion .demo-website-visual { left: 52%; }
.demo-website--fashion .demo-website-visual img { object-position: center; }
.demo-website--fashion .demo-website-copy { width: 57%; }
.demo-website--fashion .demo-website-hero::after { background: linear-gradient(90deg, #f8f8f4 0%, #f8f8f4 48%, rgba(248,248,244,0) 63%); }
@media (max-width: 560px) {
  .demo-website--fashion .demo-website-hero { min-height: 730px; }
  .demo-website--fashion .demo-website-copy { width: 100%; padding-bottom: 350px; }
  .demo-website--fashion .demo-website-visual { left: 0; top: auto; height: 350px; }
  .demo-website--fashion .demo-website-visual img { object-fit: contain; }
  .demo-website--fashion .demo-website-hero::after { background: linear-gradient(180deg, #f8f8f4 0%, #f8f8f4 49%, rgba(248,248,244,0) 58%); }
}