main {padding-top: 36px;}
#page-cliente .page-heading {margin-bottom: 26px;}
#page-cliente h1 {font-size: clamp(2.6rem, 4.2vw, 4rem);}
.order-identity {display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 3px;}
.order-identity > span:first-child {font-size: 14px; color: var(--muted);}
.steps button {padding-top: 17px; padding-bottom: 17px;}
.client-grid {grid-template-columns: minmax(0,1.5fr) minmax(330px, .9fr); gap: 32px;}
.preview-tabs {display: flex; gap: 7px; background: #17181b; padding: 5px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 16px;}
.preview-tabs button {flex: 1; background: none; border: 1px solid transparent; border-radius: 3px; padding: 12px 9px; color: var(--muted); font-size: 13px; line-height: 1.3; white-space: nowrap;}
.preview-tabs button.active {background: #26251e; border-color: #625534; color: var(--gold-soft);}
.preview-tabs button:hover {color: var(--text);}
.concept-stage {border: 1px solid #4a4437; border-radius: 6px; overflow: hidden; background: #161719; position: relative;}
.concept-meta {position: absolute; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; z-index: 1; pointer-events: none; gap: 10px;}
.concept-meta > span {font-size: 10px; letter-spacing: .12em; color: #fff; background: #1b1c1bd9; border: 1px solid #ffffff30; padding: 7px 10px; border-radius: 3px; backdrop-filter: blur(8px);}
.concept-meta > span:last-child {letter-spacing: .03em;}
.concept-open {display: block; width: 100%; border: none; border-radius: 0; padding: 0; background: #939496; position: relative; cursor: zoom-in;}
.concept-open > img {display: block; width: 100%; height: 510px; object-fit: contain;}
.expand-hint {position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #ffffff33; border-radius: 3px; background: #101113cc; color: #fff; font-size: 12px; backdrop-filter: blur(8px);}
.expand-hint svg {width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4;}
.concept-caption {display: flex; align-items: center; justify-content: space-between; padding: 17px 21px; gap: 20px; background: linear-gradient(110deg, #212018, #161719);}
.concept-caption div {display: flex; flex-direction: column; gap: 4px;}
.concept-caption div > span {font-size: 9px; letter-spacing: .16em; color: var(--gold-soft);}
.concept-caption strong {font-size: 16px; font-weight: 400;}
.concept-caption > span {font-size: 12px; letter-spacing: .1em; color: var(--muted);}
.concept-thumbnails {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-top: 15px;}
.concept-thumbnails button {background: var(--surface); padding: 4px; border: 1px solid #35363c; border-radius: 4px; min-width: 0; color: var(--muted);}
.concept-thumbnails button.active {border-color: var(--gold); color: var(--gold-soft); background: #d4af3708;}
.concept-thumbnails img {display: block; width: 100%; height: 95px; object-fit: cover; object-position: center 33%; border-radius: 2px;}
.concept-thumbnails span {display: block; font-size: 11px; padding: 9px 2px 6px;}
.concept-note {font-size: 12px; line-height: 1.75; color: var(--muted); margin: 16px 0 0;}
.concept-finish-note {font-size: 12px; line-height: 1.7; color: var(--gold-soft); padding: 12px 15px; border-left: 1px solid var(--gold); background: #d4af3708; margin: 12px 0 0;}
.preview-facts {display: flex; justify-content: center; gap: 25px; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 20px; color: #bdbdc4; font-size: 11px;}
.preview-facts i {font-style: normal; color: var(--gold-soft); margin-right: 6px;}
.configuration-card {margin-top: 0; border-radius: 6px; padding: 30px; background: linear-gradient(140deg,#1c1c1e,#141517 50%);}
.configuration-card .card-top {padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 0;}
.configuration-card h2 {font-size: 28px;}
.configuration-card .primary {display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left;}
.configuration-card .primary > span {font-size: 20px; font-weight: 400;}
.proposal-review {display: block; background: none; border: 0; padding: 0; margin: 18px auto 0; font-size: 13px;}
.comparison-heading {padding: 12px 0 20px;}
.comparison-heading h2 {font-size: 24px;}
.comparison-heading p {font-size: 13px; color: var(--muted); margin: 8px 0 0;}
.comparison-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.comparison-grid figure {margin: 0; border: 1px solid #3b382e; background: #141517; border-radius: 5px; overflow: hidden; min-width: 0;}
.comparison-grid figcaption {font-size: 12px; padding: 13px 12px; color: #dedee3; line-height: 1.6;}
.comparison-grid figcaption span {color: var(--gold-soft); font-size: 10px; margin-right: 7px;}
.comparison-grid img {width: 100%; display: block; height: 355px; object-fit: contain; background: #939496;}
.comparison-grid #compare-model {background: #17181a;}
.comparison-grid figure > p {font-size: 11px; color: var(--muted); padding: 11px 12px; margin: 0;}
.compare-controls {display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 16px;}
.compare-controls button {font-size: 12px; border: 1px solid transparent; border-radius: 3px; padding: 9px 12px; color: var(--muted); background: none;}
.compare-controls button.active {color: var(--gold-soft); border-color: #d4af3750; background: #d4af3708;}
#visual-comparacion > .secondary {margin-top: 20px;}
.comparison-inference {padding-left: 12px; border-left: 1px solid #685b34;}
.client-guide {display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 34px; border-top: 1px solid var(--border); margin-top: 50px; padding-top: 35px;}
.guide-intro .eyebrow {font-size: 10px; margin-bottom: 14px;}
.guide-intro h2 {font-size: 28px; font-weight: 300;}
.client-guide article > span {font-size: 10px; color: var(--gold-soft); letter-spacing: .12em;}
.client-guide h3 {font-size: 15px; font-weight: 400; margin: 17px 0 9px;}
.client-guide article p {font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0;}
.gallery-dialog {width: min(840px, calc(100vw - 32px)); max-width: 840px; max-height: calc(100dvh - 32px); padding: 20px; border-radius: 6px; overflow-y: auto;}
.lightbox-heading {display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 17px;}
.lightbox-heading span {display: block; color: var(--gold-soft); font-size: 10px; letter-spacing: .13em; margin-bottom: 8px;}
.lightbox-heading h2 {font-size: 22px;}
.lightbox-heading .icon-button {font-size: 30px; padding: 0 10px;}
#lightbox-image {display: block; height: min(62dvh, 650px); width: 100%; object-fit: contain; background: #939496; border-radius: 3px;}
.lightbox-controls {display: flex; align-items: center; gap: 12px; margin-top: 17px;}
.lightbox-controls .secondary {padding: 8px 15px;}
.lightbox-controls > span {font-size: 12px; color: var(--muted); min-width: 50px; text-align: center;}
.lightbox-controls a {font-size: 12px; color: var(--gold-soft); text-decoration: none; margin-left: auto;}
.lightbox-controls a:hover {text-decoration: underline;}
#lightbox-note {font-size: 11px; color: var(--muted); line-height: 1.6; margin: 15px 0 0;}
@media (max-width: 1100px) {
  .client-grid {gap: 24px; grid-template-columns: minmax(0,1.3fr) minmax(310px,1fr);}
  .preview-tabs button {font-size: 12px; padding: 12px 6px;}
  .concept-open > img {height: 490px;}
  .concept-thumbnails {gap: 7px;}
  .concept-thumbnails img {height: 80px;}
  .comparison-grid img {height: 290px;}
  .client-guide {gap: 24px;}
}
@media (max-width: 900px) {
  .order-identity {align-items: flex-start; flex-direction: row; align-items: center; gap: 15px;}
  .client-grid {grid-template-columns: minmax(0,1fr);}
  .configuration-card {max-width: none;}
  .client-guide {grid-template-columns: repeat(3,minmax(0,1fr));}
  .guide-intro {grid-column: 1/-1;}
  .guide-intro br {display: none;}
  .concept-open > img {height: 560px;}
  .concept-thumbnails img {height: 105px;}
  .comparison-grid img {height: 360px;}
}
@media (max-width: 720px) {
  .preview-tabs {gap: 3px; padding: 4px; margin-bottom: 12px;}
  .preview-tabs button {font-size: 11px; padding: 12px 5px;}
  .preview-tabs button:first-child {flex: 1.5;}
  .concept-open > img {height: auto; aspect-ratio: 1;}
  .concept-meta {top: 12px; left: 12px; right: 12px;}
  .concept-meta > span {font-size: 8px; padding: 6px 7px;}
  .expand-hint {right: 12px; bottom: 12px; padding: 7px 9px; font-size: 10px;}
  .concept-caption {padding: 15px 16px;}
  .concept-caption strong {font-size: 15px;}
  .concept-thumbnails {gap: 6px; margin-top: 12px;}
  .concept-thumbnails img {height: 72px;}
  .concept-thumbnails span {font-size: 9px; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 5px 1px;}
  .preview-facts {gap: 17px; font-size: 10px; flex-wrap: wrap;}
  .configuration-card {padding: 25px;}
  .comparison-grid {gap: 7px;}
  .comparison-grid figcaption {font-size: 10px; padding: 10px 8px;}
  .comparison-grid img {height: 205px;}
  .comparison-grid figure > p {font-size: 9px; padding: 9px 8px;}
  .compare-controls {gap: 3px;}
  .compare-controls button {font-size: 11px; padding: 8px;}
  .client-guide {grid-template-columns: 1fr; gap: 26px; margin-top: 35px; padding-top: 28px;}
  .client-guide article {padding-top: 20px; border-top: 1px solid var(--border);}
  .client-guide h3 {margin-top: 12px;}
  .gallery-dialog {padding: 16px;}
  #lightbox-image {height: min(55dvh, 650px);}
  .lightbox-controls {gap: 8px;}
  .lightbox-controls a {font-size: 11px;}
}