/* Desarrollo V03. Typography, navigation and enquiry controls share the site styles. */
html[data-page="desarrollo"] {
  --dev-card-art: url('/assets/web/ia-empresas/v1/surfaces/card-charcoal.svg');
}

.dev-capabilities,
.dev-examples,
.dev-method,
.dev-planner,
.dev-questions {
  padding-block: clamp(25px, 2.5vw, 38px);
  border-top: 1px solid #92722caa;
}

.dev-capabilities h2,
.dev-section-heading h2,
.dev-method h2,
.dev-planner h2,
.dev-questions h2 {
  font-size: clamp(32px, 3.22vw, 47px);
  line-height: 1.08;
}

.mobile-nav a[aria-current="page"],
.site-footer nav a[aria-current="page"] { color: var(--gold); }

.dev-hero {
  display: grid;
  align-items: center;
  min-height: clamp(438px, 32vw, 508px);
  background: #030505;
}

.dev-hero-art {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(74%, 1350px);
  overflow: hidden;
}

.dev-hero-art img,
.dev-ridge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-hero-art img { object-position: right 37%; }

.dev-hero-art::after {
  position: absolute;
  content: '';
  inset: 0;
  background: linear-gradient(90deg, #030505 0%, #030505f2 14%, #030505b8 25%, #03050521 39%, transparent 52%),
    linear-gradient(0deg, #030505b3, transparent 15%);
}

.dev-hero-inner { padding-block: 29px 30px; }
.dev-hero-copy { width: min(49%, 630px); }

.dev-hero h1 {
  font: 400 clamp(41px, 3.82vw, 58px)/1.01 var(--serif);
  letter-spacing: -.026em;
  text-wrap: pretty;
}

.dev-hero h1 span { display: block; }
.dev-hero-silver { color: var(--silver); }
.dev-hero-gold { color: var(--gold); margin-top: .06em; }

@supports (background-clip: text) {
  .dev-hero h1 span {
    background-clip: text;
    color: transparent;
  }
  .dev-hero-silver { background-image: var(--silver-face); }
  .dev-hero-gold { background-image: var(--gold-face); }
}

.dev-intro {
  max-width: 525px;
  margin-top: 16px;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.55;
  color: #e0e5e6;
}

.dev-hero-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 17px;
  margin-top: 17px;
  list-style: none;
  color: #f1f3f4;
  font-size: 13px;
  font-weight: 650;
}

.dev-hero-markers li { display: flex; align-items: center; gap: 7px; }
.dev-hero-markers .icon { width: 18px; height: 18px; }

.dev-ridge { overflow: hidden; opacity: .38; }

.dev-ridge img { object-position: right 32%; }

.dev-ridge::after {
  position: absolute;
  content: '';
  inset: 0;
  background: linear-gradient(90deg, #030505 17%, #030505ec 35%, #03050540 100%),
    linear-gradient(0deg, #030505 3%, transparent 92%);
}

.dev-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.dev-section-intro {
  max-width: 85ch;
  margin-top: 10px;
  color: #e2e3df;
  font-size: clamp(16px, 1.38vw, 18px);
  line-height: 1.5;
}

.dev-capability {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  min-height: 119px;
  padding: 20px 17px;
  border: 1px solid #465257;
  border-radius: 14px;
  background: linear-gradient(#192225, #0b1012 74%);
}

.dev-capability .icon { width: 39px; height: 39px; margin-top: 2px; }

.dev-capability h3 {
  margin-bottom: 4px;
  color: #f1f3f4;
  font: 800 16px/1.22 var(--sans);
  letter-spacing: normal;
}

.dev-capability p {
  font-size: 14px;
  line-height: 1.48;
  color: #d3dadc;
}

.dev-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 24px;
  margin-bottom: 18px;
}

.dev-example-disclosure {
  align-self: end;
  margin-bottom: 4px;
  padding-inline-start: 15px;
  border-inline-start: 1px solid var(--gold);
  color: #dce0df;
  font-size: 13px;
  line-height: 1.5;
}

.dev-example-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.dev-example-option { position: relative; display: grid; min-width: 0; }

.dev-example-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 49px;
  padding: 8px 12px;
  border: 1px solid #a68537;
  border-radius: var(--control-radius);
  background: #0b1112;
  color: #f1f3f4;
  font: 800 15px/1.25 var(--sans);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dev-example-tab .icon { width: 24px; height: 24px; }
.dev-example-tab:hover { border-color: var(--control-gold); }
.dev-example-radio:focus-visible + .dev-example-tab { outline: 2px solid var(--control-focus); outline-offset: 3px; }
.dev-example-radio:checked + .dev-example-tab {
  border-color: #ffde7b;
  background: var(--control-gold) var(--control-gold-face) center / 100% 100% no-repeat;
  color: #161408;
  box-shadow: 0 2px 13px #dba62c21;
}
.dev-example-radio:checked + .dev-example-tab .icon { filter: brightness(.08); }

.dev-examples:has(.dev-example-radio:checked) .dev-case-panel { display: none; }
.dev-examples:has(#example-field:checked) #case-field,
.dev-examples:has(#example-orders:checked) #case-orders,
.dev-examples:has(#example-bookings:checked) #case-bookings { display: block; }

.dev-case-panel {
  padding: clamp(13px, 1.5vw, 20px);
  border: 1px solid #536064;
  border-radius: 12px;
  background: linear-gradient(150deg, #151e21, #0a0e10 75%);
}

.dev-case-study { display: grid; align-items: center; gap: clamp(14px, 1.8vw, 24px); }
.dev-case-result { min-width: 0; }
.dev-case-result h3, .dev-plan-result h3 {
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.1;
}

.dev-case-result ul { display: grid; gap: 12px; margin-top: 16px; list-style: none; }
.dev-case-result li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 650;
  line-height: 1.38;
}
.dev-case-result .icon { width: 28px; height: 28px; }
.dev-case-evaluation {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 13px;
  padding: 12px 3px 0;
  border-top: 1px solid #384549;
  color: #d3dadc;
  font-size: 13px;
  line-height: 1.5;
}
.dev-case-evaluation strong { color: var(--gold); }
.dev-case-evaluation ul { display: flex; flex-wrap: wrap; gap: 3px 11px; list-style: none; }
.dev-case-evaluation li + li::before { content: '·'; margin-inline-end: 9px; color: var(--gold); }

.dev-device-frame { min-width: 0; }

.dev-device-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 18px;
}

.dev-device-art {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 54%;
  mask-image: linear-gradient(#000 12%, transparent 100%);
  opacity: .43;
}

.dev-device {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.dev-screen {
  min-width: 0;
  background: #111922;
  color: #f1f4f4;
  font: 500 14px/1.35 var(--sans);
}

.dev-office-screen,
.dev-phone-screen {
  border: 1px solid #3d474c;
  border-radius: 10px;
  padding: 15px;
}

.dev-dashboard-rail { display: none; }
.dev-office-main, .dev-phone-screen { display: grid; align-content: start; gap: 8px; }
.dev-screen-kicker, .dev-order-meta { color: #c6ced1; }
.dev-screen-kicker { font-size: .86em; }
.dev-order-meta { font-size: .9em; }

.dev-order-heading,
.dev-photo-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.dev-order-id {
  color: #f5f7f8;
  font-size: 2.15em;
  font-weight: 700;
  line-height: 1.08;
}

.dev-task {
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1.18;
}

.dev-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: .4em;
  padding: .3em .62em;
  border: 1px solid;
  border-radius: 4px;
  font-weight: 700;
  font-size: .9em;
  line-height: 1.3;
}

.dev-chip .icon { width: 1em; height: 1em; }

.dev-chip-success,
.dev-sent {
  color: #d6f5df;
  background: #153526;
  border-color: #346548;
}

.dev-review,
.dev-chip-warm {
  color: #ffe6a0;
  background: #30250e;
  border: 1px solid #856329;
}

.dev-review {
  padding: .42em .68em;
  border-radius: 4px;
  font-size: .96em;
}

.dev-photo-label { font-size: .94em; }
.dev-photo-label span { color: #c6ced1; }

.dev-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dev-photos img {
  width: 100%;
  aspect-ratio: 2/1;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ffffff2e;
}

.dev-photos img { object-position: center 48%; }

.dev-sent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .12em .45em;
  border: 1px solid #346548;
  border-radius: 4px;
  padding: .5em .6em;
  line-height: 1.22;
}

.dev-phone-count {
  padding: .38em .6em;
  border: 1px solid #445159;
  border-radius: 4px;
  color: #e2e8e9;
  background: #19232c;
  font-size: .9em;
}

.dev-phone-review {
  display: grid;
  gap: 3px;
  line-height: 1.24;
}

.dev-phone-review span { color: #c6ced1; font-size: .9em; }

.dev-device-label {
  align-self: center;
  order: -1;
  margin-bottom: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 3px 12px;
  border: 1px solid #97722e;
  border-radius: 4px;
  background: #050808f2;
  color: #f3f3ed;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.dev-case-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 36px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid #92722caa;
  border-radius: 8px;
  background: #0b1012;
  list-style: none;
}

.dev-case-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}

.dev-case-flow .icon { width: 27px; height: 27px; }

.dev-flow-arrow {
  position: absolute;
  top: 50%;
  inset-inline-end: -28px;
  transform: translateY(-50%);
}

.dev-mini-ui {
  align-self: center;
  min-width: 0;
  padding: clamp(11px, 2vw, 19px);
  border: 1px solid #73623b;
  border-radius: 10px;
  background: #11191f;
  box-shadow: inset 0 0 0 3px #080c0f, 0 8px 18px #0005;
}

.dev-mini-heading,
.dev-mini-label,
.dev-mini-result {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  line-height: 1.35;
}

.dev-mini-heading { margin-bottom: 12px; color: #f1f3f4; font-size: 16px; }
.dev-mini-heading .icon { width: 25px; height: 25px; }
.dev-mini-label .icon, .dev-mini-result .icon { width: 18px; height: 18px; }

.dev-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.dev-mini-reservas {
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.dev-mini-reservas > .icon { width: 20px; height: 20px; justify-self: center; }
.dev-mini-reservas .dev-mini-panel { align-self: stretch; }

.dev-mini-panel {
  min-width: 0;
  border: 1px solid #495761;
  border-radius: 7px;
  padding: clamp(8px, 1.25vw, 14px);
  background: #151f27;
}

.dev-mini-label { color: #f0f2f3; font-size: 13px; }
.dev-mini-result {
  margin-top: 11px;
  padding: 9px 11px;
  border: 1px solid #756237;
  border-radius: 6px;
  background: #211d13;
  color: #f1ead7;
  font-size: 13px;
}
.dev-mini-result span { flex: 1; min-width: 0; }
.dev-mini-result strong { margin-inline-start: auto; color: var(--gold); white-space: nowrap; }

.dev-product {
  display: grid;
  grid-template-columns: minmax(0, 64px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  padding-top: 7px;
}

.dev-product img { width: 100%; height: auto; }
.dev-product p, .dev-slot-time { font-size: 14px; line-height: 1.4; }
.dev-product-code, .dev-slot-time time { white-space: nowrap; }
.dev-product strong { display: block; color: var(--gold); font-size: 21px; white-space: nowrap; }
.dev-slot-time { margin-block: 10px 7px; color: #dfe5e8; }
.dev-mini-panel .dev-chip { font-size: 12px; }

.dev-method-layout,
.dev-planner-layout,
.dev-faq-layout {
  display: grid;
  align-items: start;
  gap: clamp(22px, 2.6vw, 36px);
}

.dev-method-layout { grid-template-columns: minmax(0, .48fr) minmax(0, 1fr); }
.dev-method-art {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #121716;
}
.dev-method-art img { width: 100%; height: 100%; object-fit: cover; }
.dev-method-copy { min-width: 0; }

.dev-phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 18px;
  list-style: none;
}

.dev-phases li { position: relative; min-width: 0; }
.dev-phase-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 49px;
  padding: 7px 8px;
  border: 1px solid #465257;
  border-radius: 11px;
  background: linear-gradient(#192225, #0b1012 74%);
  text-align: center;
}
.dev-phase-heading .icon { width: 21px; height: 21px; }
.dev-phase-heading h3 {
  min-width: 0;
  color: #f1f3f4;
  font: 750 13px/1.3 var(--sans);
  letter-spacing: normal;
  text-wrap: balance;
}
.dev-phases li > p { margin: 6px 4px 0; color: #dce0df; font-size: 13px; line-height: 1.45; }
.dev-phase-arrow {
  position: absolute;
  inset-inline-end: -21px;
  top: 24px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.dev-method-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid #8e7030;
  border-radius: 7px;
  background: #161309;
  color: var(--gold-light);
  font-size: 13px;
  line-height: 1.5;
}
.dev-method-note .icon { width: 20px; height: 20px; }
.dev-method-details { margin-top: 9px; }
.dev-method-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-inline: 3px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 750;
}
.dev-method-details dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 5px 0 0;
  padding-top: 11px;
  border-top: 1px solid #495255;
  font-size: 14px;
  line-height: 1.5;
}
.dev-method-details dt { color: var(--gold); font-weight: 750; }
.dev-method-details dd { margin: 3px 0 0; color: #dce0df; }

.dev-planner-layout { grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); }
.dev-planner-copy h2 { font-size: clamp(32px, 2.9vw, 43px); text-wrap: pretty; }

.dev-plan {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(15px, 2vw, 26px);
  min-width: 0;
  padding: clamp(14px, 1.8vw, 24px);
  border: 1px solid #536064;
  border-radius: 12px;
  background: linear-gradient(150deg, #182125, #0b1012 72%);
}

.dev-plan-controls { display: grid; align-content: center; gap: 12px; }
.dev-plan-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 14px;
  font-weight: 750;
}

.dev-plan-controls select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #78868a;
  border-radius: 6px;
  background: #151d20;
  color: #f1f3f4;
  font: 600 16px/1.35 var(--sans);
}
.dev-plan-controls select:enabled { cursor: pointer; }
.dev-plan-controls select:hover:enabled { border-color: var(--control-gold); }
.dev-plan-controls select:focus-visible { outline-offset: 2px; border-radius: 6px; }

.dev-plan-result {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: clamp(14px, 1.8vw, 23px);
  border: 1px solid #d0a53b;
  border-radius: 10px;
  background: linear-gradient(150deg, #282416, #0c1112 68%);
}

.dev-plan-result h3 { color: var(--gold); font-size: clamp(26px, 2.22vw, 34px); }

.dev-plan-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  margin-top: 12px;
  list-style: none;
  font-size: 15px;
  font-weight: 750;
}
.dev-plan-steps li { display: flex; align-items: baseline; gap: 7px; }
.dev-plan-steps li::before { content: '•'; color: var(--gold); }
.dev-plan-audience { margin-top: 9px; color: #d8dedf; font-size: 14px; }

.dev-plan-validation {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block: 14px 15px;
  padding-top: 12px;
  border-top: 1px solid #6b6141;
  color: #f1f3f4;
  font-size: 14px;
  line-height: 1.45;
}
.dev-plan-validation strong { margin-inline-end: .28em; color: var(--gold); }
.dev-plan-validation .icon { width: 22px; height: 22px; }
.dev-plan-result .button { width: 100%; }
.dev-plan-status, .dev-plan-fallback { color: #fff1bd; font-size: 13px; }
.dev-plan-status:not(:empty), .dev-plan-fallback { margin-top: 9px; }
.dev-plan[data-plan-ready="true"] .dev-plan-fallback { display: none; }

.dev-faq-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
}
.dev-handover-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  list-style: none;
}
.dev-handover-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #f1f3f4;
  font-size: 13px;
  line-height: 1.35;
}
.dev-handover-list .icon { width: 29px; height: 29px; }
.dev-faq {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-inline-start: clamp(17px, 2.5vw, 31px);
  border-inline-start: 1px solid #a68537;
}
.dev-faq details {
  min-width: 0;
  border: 1px solid #535e61;
  border-radius: 13px;
  background: linear-gradient(#192225, #0b1012 74%);
}
@supports (border-image: url('/assets/web/ia-empresas/v1/surfaces/card-charcoal.svg') 40 fill / 16px / 0 stretch) {
  .dev-capability, .dev-phase-heading, .dev-faq details {
    border: 0 solid transparent;
    border-image: var(--dev-card-art) 40 fill / 16px / 0 stretch;
    background: none;
  }
}
.dev-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 10px 14px;
  color: #f1f3f4;
  font-size: 15px;
  font-weight: 750;
}
.dev-faq summary:hover { color: var(--gold-light); }
.dev-faq details[open] { outline: 1px solid #a68537; outline-offset: -1px; }
.dev-faq details p { max-width: 88ch; padding: 0 14px 14px; color: #d8dedf; font-size: 14px; }





@media (min-width: 880px) {
  /* The offsets use the 1703 × 923 scene's measured inner screen windows.
     Crop only the frame. The screen art and live UI share the full source ratio. */
  .dev-device-frame {
    position: relative;
    aspect-ratio: 1703 / 772;
    overflow: hidden;
    margin-top: 0;
  }

  .dev-device-scene {
    position: absolute;
    top: -8.6788%;
    inset-inline: 0;
    aspect-ratio: 1703 / 923;
    display: block;
    container-type: inline-size;
  }

  .dev-device-art {
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 13%, #000 96%, transparent);
    opacity: 1;
  }

  .dev-device {
    position: absolute;
    height: 59.6966%;
    display: block;
  }

  .dev-device-office { left: 11.5091%; top: 14.0845%; width: 59.6594%; }
  .dev-device-phone { left: 78.8021%; top: 20.4767%; width: 14.7387%; }

  .dev-screen {
    height: 100%;
    border: 0;
    font-size: 1.36cqw;
  }

  .dev-office-screen {
    display: grid;
    grid-template-columns: 20% minmax(0, 1fr);
    padding: 0;
    border-radius: 1cqw;
    background: #111922;
  }

  .dev-dashboard-rail {
    display: block;
    min-width: 0;
    padding: 1.5cqw .9cqw;
    border-radius: 1cqw 0 0 1cqw;
    background: #0c1319;
    color: #d0d7da;
    font-size: 1.19cqw;
  }

  .dev-dashboard-rail strong {
    display: flex;
    align-items: center;
    gap: .45em;
    color: var(--gold);
    font-size: 1.04em;
    font-weight: 800;
  }

  .dev-dashboard-rail strong .icon { width: 1.12em; height: 1.12em; }
  .dev-dashboard-rail ul { list-style: none; margin-top: 1cqw; }

  .dev-dashboard-rail li {
    padding: .42em .35em;
    margin-top: .32em;
    border: 1px solid transparent;
    line-height: 1.25;
  }

  .dev-dashboard-rail li.is-active {
    border-color: #775b29;
    border-radius: 4px;
    background: #2b2415;
    color: #ffe7ad;
  }

  .dev-office-main { padding: 1.48cqw 1.7cqw; gap: .55cqw; }
  .dev-order-heading { flex-wrap: nowrap; }
  .dev-photos { gap: .75cqw; }
  .dev-photos img { aspect-ratio: 2.08 / 1; }
  .dev-order-meta { line-height: 1.3; }
  .dev-review { margin-top: .24cqw; }
  .dev-photo-label { margin-top: .21cqw; }

  .dev-phone-screen {
    border-radius: 1.9cqw;
    padding: 2.6cqw 1.18cqw 1cqw;
    gap: .69cqw;
    font-size: 1.12cqw;
  }

  .dev-phone-screen .dev-order-id { font-size: 2.2em; }
  .dev-phone-screen .dev-task { font-size: 1.22em; }
  .dev-sent { flex-direction: column; }
  .dev-device-label { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .dev-device-office .dev-device-label { top: 117%; }
  .dev-device-phone .dev-device-label { top: 106.3%; }
}

@media (min-width: 1180px) {
  .dev-case-study { grid-template-columns: minmax(0, 2.22fr) minmax(0, 1fr); }
  .dev-case-result { padding-inline-start: clamp(14px, 1.8vw, 24px); border-inline-start: 1px solid #a68537; }
}

@media (max-width: 1179px) {
  .dev-case-result { padding-top: 15px; border-top: 1px solid #746133; }
  .dev-planner-layout { grid-template-columns: minmax(0, 1fr); }
  .dev-handover-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
  .dev-hero { display: flex; flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .dev-hero-inner { padding-block: 31px 0; }
  .dev-hero-copy { width: 100%; max-width: 670px; }
  .dev-hero-art { position: relative; width: 100%; height: clamp(210px, 53vw, 365px); z-index: auto; margin-top: 10px; }
  .dev-hero-art img { object-position: right 41%; }
  .dev-hero-art::after { background: linear-gradient(#030505 0%, #03050525 22%, transparent 45%); }
}

@media (max-width: 1023px) {
  .dev-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-method-layout, .dev-faq-layout { grid-template-columns: minmax(0, 1fr); }
  .dev-faq { padding: 17px 0 0; border-inline-start: 0; border-top: 1px solid #a68537; }
}

@media (min-width: 620px) and (max-width: 879px) {
  .dev-device-scene { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 767px) {
  .dev-hero h1 { font-size: clamp(35px, 7.95vw, 52px); }
  .dev-intro { margin-top: 12px; font-size: 16px; }
  .dev-actions { margin-top: 17px; }
  .dev-hero-markers { margin-top: 14px; gap: 6px 13px; font-size: 12px; }
  .dev-capability { min-height: 0; padding: 16px; }
  .dev-capability .icon { width: 34px; height: 34px; }
  .dev-section-heading { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dev-example-disclosure { margin: 0; padding-inline-start: 10px; }
  .dev-example-choices { gap: 8px; }
  .dev-example-tab { gap: 6px; padding: 8px; font-size: 13px; }
  .dev-case-flow { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 11px 13px; }
  .dev-flow-arrow { display: none; }
  .dev-case-evaluation { display: grid; gap: 4px; }
  .dev-case-evaluation ul { display: grid; padding-inline-start: 1.1em; list-style: disc; }
  .dev-case-evaluation li::marker { color: var(--gold); }
  .dev-case-evaluation li + li::before { content: none; }
  .dev-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dev-phase-arrow { display: none; }
  .dev-method-details dl { grid-template-columns: minmax(0, 1fr); }
  .dev-plan { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 539px) {
  .dev-capability-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dev-example-tab { flex-direction: column; min-height: 67px; }
  .dev-example-tab .icon { width: 20px; height: 20px; }
  .dev-product { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dev-product img { max-width: 50px; }
  .dev-mini-reservas { gap: 6px; }
}

@media (forced-colors: active) {
  html[data-page="desarrollo"] h2,
  .dev-hero h1 span { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .dev-example-radio:checked + .dev-example-tab { background: Highlight; color: HighlightText; }
  .dev-example-radio:checked + .dev-example-tab .icon { filter: none; }
  .dev-capability, .dev-phase-heading, .dev-faq details { border: 1px solid ButtonText; border-image: none; background: Canvas; }
}