:root { --verde: #4c8c59; --verde-oscuro: #163d2b; --verde-claro: #9dd28e; --crema: #f7f6f1; --texto: #25342b; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--texto); background: radial-gradient(circle at 82% 12%, #d5eca7 0, transparent 26%), linear-gradient(135deg, #2ab9c7 0%, #73cfab 50%, #dfdf67 100%); font-family: Arial, Helvetica, sans-serif; min-height: 100vh; }
.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.quote-page { min-height:100vh; padding:24px; background:#f7f6f1; }
.quote-header { width:min(1000px,100%); margin:0 auto 22px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.compact-brand { color:var(--verde-oscuro); font-size:13px; letter-spacing:.09em; }
.compact-brand span { display:inline-grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#fff; background:linear-gradient(135deg,#26b9c7,#d7dc65); margin-right:7px; }
.quote-header .secondary-link { margin:0; }
.header-whatsapp { display:flex; align-items:center; justify-content:center; gap:7px; }
.header-whatsapp svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mobile-contact-label { display:none; }
.quote-card { width:min(760px,100%); margin:0 auto; border-radius:24px; background:#fff; border:1px solid #dfe9d9; box-shadow:0 14px 42px rgba(22,61,43,.12); padding:34px; }
.quote-progress { display:flex; gap:7px; margin-bottom:30px; overflow:auto; }
.quote-progress span { white-space:nowrap; border-radius:99px; background:#f0f5ed; color:#66766b; padding:8px 12px; font-size:12px; font-weight:700; }
.quote-progress .active { background:#e0f0d9; color:var(--verde-oscuro); }
.quote-form h1 { font-size:clamp(30px,5vw,45px); margin:10px 0 12px; }
.form-intro { color:#617267; line-height:1.5; margin:0 0 26px; }
.hero-card { width: min(1080px, 100%); background: rgba(255,255,255,.94); border-radius: 28px; padding: 30px 34px 34px; box-shadow: 0 24px 70px rgba(15,55,42,.25); }
.brand-row { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #e4e9de; padding-bottom: 22px; }
.brand-mark { display:grid; place-items:center; width:45px; height:45px; color:white; border-radius: 13px; background: linear-gradient(135deg,#26b9c7,#d7dc65); font-size: 28px; }
.eyebrow, .tag, .panel-label { margin:0; color: var(--verde); letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.brand-subtitle { margin: 3px 0 0; color:#69756d; font-size:12px; }
.content-grid { display:grid; grid-template-columns: 1.45fr .8fr; gap: 45px; padding-top: 46px; }
h1 { font-family: Georgia, serif; font-size: clamp(35px,5vw,62px); line-height: .98; margin: 12px 0 22px; color: var(--verde-oscuro); letter-spacing:-.035em; }
h1 span { color:var(--verde); }
.hero-subtitle { margin:-10px 0 8px; color:var(--texto); font-size:clamp(22px,3vw,32px); line-height:1.15; }
.lead { max-width: 600px; line-height:1.6; font-size:17px; color:#526158; }
.steps { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.steps div { display:flex; align-items:center; gap:9px; border-radius:14px; padding:10px 12px; background:#f0f5ed; font-size:13px; font-weight:700; }
.steps strong { display:grid; place-items:center; color:white; width:24px; height:24px; border-radius:50%; background:var(--verde); }
.start-panel { border:1px solid #dfe9d9; border-radius:22px; padding:20px; align-self:start; background:linear-gradient(180deg,#fbfdf8,#eef6e9); }
.start-panel h2 { margin: 10px 0 7px; color: var(--verde-oscuro); font-family: Georgia,serif; font-size:28px; }
.status { min-height: 23px; color:#64746a; font-size:14px; margin:0 0 24px; }
.status.ok { color: var(--verde); font-weight:700; }
.status.error { color:#b23832; }
.primary-button { width:100%; border:0; cursor:pointer; border-radius:12px; padding:16px; background:var(--verde); color:white; font-size:16px; font-weight:800; transition:.2s; }
.start-link { display:block; text-align:center; text-decoration:none; }
.primary-button:not(:disabled):not([aria-disabled="true"]):hover { background:#3b7447; transform:translateY(-1px); }
.primary-button:disabled { opacity:.55; cursor:not-allowed; }
.primary-button[aria-disabled="true"] { opacity:.55; cursor:not-allowed; pointer-events:none; }
.primary-button span { margin-left:8px; font-size:20px; }
.sticky-submit { position:sticky; z-index:10; bottom:12px; margin-top:8px; box-shadow:0 10px 26px rgba(22,61,43,.22); }
.sticky-submit:disabled { box-shadow:none; }
.secondary-link { display:block; color:var(--verde); text-align:center; font-size:14px; margin-top:18px; font-weight:700; text-decoration:none; }
.footnote { margin:25px 0 0; padding-top:17px; border-top:1px solid #dbe8d5; text-align:center; color:#50675a; font-size:12px; font-weight:700; line-height:1.45; }
.quote-form h2 { margin:10px 0 20px; color:var(--verde-oscuro); font-family:Georgia,serif; font-size:28px; }
.quote-form label { display:block; font-size:13px; font-weight:800; color:#425348; margin:0 0 13px; text-transform:uppercase; letter-spacing:.025em; }
.quote-form input, .quote-form select { display:block; width:100%; border:1px solid #ccddc5; background:#fff; border-radius:10px; padding:11px; margin-top:6px; color:var(--texto); font:inherit; text-transform:none; letter-spacing:normal; }
.quote-form input:focus, .quote-form select:focus { outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(76,140,89,.18); }
.dimension-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.customer-grid { display:grid; grid-template-columns:2fr 1.25fr 1.25fr; gap:8px; margin-bottom:14px; }
.form-help, .form-error { min-height:34px; margin:4px 0 14px; font-size:12px; line-height:1.4; }
.form-help { color:#617267; }.form-error { color:#b23832; font-weight:700; }
#formulario-medidas .form-intro { margin-bottom:12px; }
#formulario-medidas .form-help { min-height:0; margin-bottom:6px; }
#formulario-medidas .form-error:empty { display:none; }
#formulario-medidas .sticky-submit { margin-top:4px; }
#error-configuracion:empty { display:none; }
#contenido-configuracion .section-title { margin:4px 0 18px; }
.back-button { border:0; background:transparent; padding:0; color:var(--verde); font-weight:800; cursor:pointer; margin-bottom:18px; }
.result-box { margin:16px 0 0; padding:13px; border-radius:10px; background:#e8f4e4; color:var(--verde-oscuro); font-size:13px; font-weight:700; line-height:1.45; }
.configuration { border-top:1px solid #d9e6d4; margin-top:18px; padding-top:18px; }
.configuration h3 { color:var(--verde-oscuro); font:700 21px Georgia,serif; margin:9px 0 14px; }
.space-options { display:flex; gap:8px; margin:0 0 15px; }
.space-options label { flex:1; margin:0; cursor:pointer; }
.space-options input { position:absolute; opacity:0; pointer-events:none; }
.space-options span { display:flex; min-height:126px; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; border:1px solid #ccddc5; border-radius:10px; background:#fff; text-align:center; transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.space-options label:hover span { border-color:var(--verde); background:#e8f4e4; box-shadow:inset 0 0 0 1px var(--verde); transform:translateY(-2px); }
.space-options img { display:block; width:100%; height:84px; object-fit:contain; }
.space-options b { font-size:13px; }
.space-options input:checked + span { border-color:var(--verde); background:#e8f4e4; color:var(--verde-oscuro); box-shadow:inset 0 0 0 1px var(--verde); }
.color-label { margin:0 0 8px; font-size:12px; font-weight:800; color:#425348; }
.combination-note { margin:2px 0 13px; padding:9px 11px; border-left:3px solid var(--verde); border-radius:0 8px 8px 0; background:#eef6eb; color:#356b43; font-size:12px; font-weight:700; line-height:1.35; }
.color-picker-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,1fr); gap:20px; align-items:start; margin-bottom:17px; }
.color-options { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; max-height:300px; overflow:auto; padding:2px; }
.color-option { appearance:none; border:1px solid #ccddc5; border-radius:10px; background:#fff; padding:7px; min-height:68px; color:var(--texto); cursor:pointer; display:flex; align-items:center; gap:10px; font:700 11px Arial,Helvetica,sans-serif; text-align:left; transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.color-option:hover { border-color:var(--verde); background:#e8f4e4; box-shadow:inset 0 0 0 1px var(--verde); transform:translateY(-2px); }
.color-option.selected { border-color:var(--verde); box-shadow:inset 0 0 0 1px var(--verde); background:#e8f4e4; }
.color-option img { width:54px; height:54px; border-radius:6px; object-fit:cover; flex:0 0 auto; }
.color-large-preview { margin:0; overflow:hidden; background:transparent; min-height:285px; }
.color-large-preview img { display:block; width:100%; height:285px; object-fit:cover; border-radius:12px; background:#f0f5ed; }
.color-large-preview img:not([src]) { display:none; }
.color-modal { display:none; }
@media (max-width:760px), (hover:none), (pointer:coarse) {
  #vista-color-grande { display:none !important; }
  .color-picker-layout { grid-template-columns:minmax(0,1fr); }
  .color-option:hover,.space-options label:hover span { transform:none; }
}
@media (max-width:760px) {
  body.color-modal-open { overflow:hidden; }
  .color-modal:not([hidden]) { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:12px; background:rgba(15,37,27,.68); }
  .color-modal__panel { position:relative; width:min(100%,360px); max-height:calc(100dvh - 24px); overflow:auto; padding:14px; border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.3); }
  .color-modal__panel p { margin:0 42px 12px 0; color:var(--verde); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
  .color-modal__panel img { display:block; width:100%; height:clamp(180px,42dvh,270px); border-radius:13px; object-fit:cover; background:#f0f5ed; }
  .color-modal__panel strong { display:block; margin-top:10px; color:var(--verde-oscuro); font-size:17px; line-height:1.2; text-align:center; text-transform:uppercase; }
  .color-modal__close { position:absolute; z-index:1; top:10px; right:10px; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:#edf4e9; color:var(--verde-oscuro); font-size:27px; line-height:1; cursor:pointer; }
  .mobile-sticky-submit { position:sticky; z-index:10; bottom:10px; box-shadow:0 10px 26px rgba(22,61,43,.22); }
  .mobile-sticky-submit:disabled { box-shadow:none; }
  .quote-header { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:10px 14px; width:100%; }
  .quote-header .compact-brand { grid-column:1; grid-row:1; justify-self:start; }
  .quote-header > .secondary-link { grid-column:2; grid-row:1; align-self:center; margin:0; white-space:nowrap; }
  .quote-header > .back-button { grid-column:1 / -1; grid-row:2; justify-self:start; margin:0; }
  .desktop-contact-label { display:none; }
  .mobile-contact-label { display:inline; }
}
.module-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(270px,.8fr); gap:26px; align-items:start; }
.available-designs { margin-top:26px; }
#mensaje-modulos:empty { display:none; }
#contenido-modulos > .available-designs { margin-top:0; }
.limited-options-notice { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 15px; border-left:4px solid #4c8c59; border-radius:10px; background:#eef6e9; color:#294a37; font-size:14px; line-height:1.35; }
.limited-options-notice[hidden] { display:none; }
.limited-options-notice strong { flex:0 0 auto; color:#163d2b; }
.limited-options-notice span { color:#526158; }
.render-result { margin-top:26px; padding:20px; border:1px solid #d9e5d4; border-radius:14px; background:#f8fbf6; text-align:center; }
.render-result h2 { margin:3px 0 9px; color:#163d2b; font:700 26px Georgia,serif; }
.render-result p { margin:0 0 15px; color:#627268; }
.render-result img { display:block; width:min(100%,720px); max-height:680px; margin:0 auto; object-fit:contain; border-radius:12px; box-shadow:0 12px 28px rgba(49,67,44,.18); background:#fff; }
.visual-module-preview { margin:0 0 25px; padding:18px; border:1px solid #d9e5d4; border-radius:14px; background:linear-gradient(135deg,#f9fcf7,#eef5e9); overflow:hidden; }
.visual-module-preview h2 { margin:5px 0 13px; color:var(--verde-oscuro); font:700 21px Georgia,serif; }
.visual-intro { margin:-7px 0 15px; color:#64746a; font-size:13px; }
.viewer-delivery-note { margin:10px 0 0; color:#486657; font-size:12px; font-weight:700; text-align:center; }
.viewer-3d { position:relative; min-height:285px; overflow:hidden; border-radius:10px; background:#f7f3ed; box-shadow:0 12px 27px rgba(68,51,30,.16); }
.viewer-3d canvas { display:block; width:100%; height:350px; touch-action:none; cursor:grab; }
.viewer-3d .visor-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px; }
.viewer-3d .visor-controls label { display:flex; align-items:center; gap:8px; flex:1; min-width:150px; }
.viewer-3d .visor-controls input { width:100%; min-width:80px; accent-color:#518e60; }
.viewer-3d .visor-controls button { padding:10px 12px; border:1px solid #518e60; border-radius:8px; color:#163d2b; background:#fff; cursor:pointer; }
.viewer-3d .visor-info-link { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:39px; padding:6px 12px; border:1px solid #518e60; border-radius:8px; color:#163d2b; background:#fff; text-align:center; text-decoration:none; line-height:1.1; }
.viewer-3d .visor-info-main { display:flex; align-items:center; justify-content:center; gap:6px; }
.viewer-3d .visor-info-main svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.viewer-3d .visor-info-main .visor-info-dot { fill:currentColor; stroke:none; }
.viewer-3d .visor-info-link strong { font-size:12px; }
.viewer-3d .visor-info-link small { margin-top:3px; color:#518e60; font-size:9px; }
.viewer-3d .visor-info-link:hover { background:#edf6e9; }
.viewer-3d .visor-info-link:focus-visible { outline:3px solid rgba(76,140,89,.28); outline-offset:2px; }
.viewer-3d > .visor-status { display:none; }
.viewer-3d > p { display:grid; place-items:center; min-height:285px; margin:0; color:#64746a; font-size:13px; }
.composicion-mueble { position:relative; display:grid; place-items:center; min-height:285px; padding:22px 18px 31px; overflow:hidden; background:linear-gradient(148deg,#fbf8f1 0%,#ebe4d9 100%); }
.composicion-mueble__fondo { position:absolute; inset:18px 20px 44px; border-radius:9px; background:radial-gradient(ellipse at 50% 18%,#fffefa 0%,#f1eadf 72%); box-shadow:inset 0 0 32px rgba(90,65,39,.08); }
.composicion-mueble__mueble { position:relative; z-index:2; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; width:min(100%,410px); height:222px; filter:drop-shadow(0 10px 7px rgba(59,43,25,.22)); }
.composicion-mueble__tapa,.composicion-mueble__zocalo { flex:none; height:9px; border-radius:2px; background:linear-gradient(180deg,#6f7470,#3f4543); box-shadow:inset 0 1px rgba(255,255,255,.22); }
.composicion-mueble__zocalo { height:13px; border-radius:0 0 2px 2px; }
.composicion-mueble__modulos { position:relative; display:flex; flex:1 1 auto; align-items:stretch; justify-content:center; min-height:0; overflow:hidden; background:#eff0ec; }
.modulo-compuesto { position:relative; height:100%; min-height:0; margin:0; background:#eff0ec; transition:filter .18s ease; }
.modulo-compuesto + .modulo-compuesto { border-left:2px solid #58605c; }
.modulo-compuesto:hover { z-index:3; filter:brightness(1.03); }
.modulo-compuesto--1 { flex:1 1 0; min-width:0; }
.modulo-compuesto--2 { flex:2 1 0; min-width:0; }
.modulo-compuesto--3 { flex:3 1 0; min-width:0; }
.modulo-compuesto__caja { height:100%; overflow:hidden; background:#eff0ec; }
.modulo-compuesto img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; mix-blend-mode:multiply; }
.modulo-compuesto--pendiente { flex:1 1 0; min-width:0; opacity:.7; filter:none; }
.modulo-compuesto--pendiente .modulo-compuesto__caja { background:repeating-linear-gradient(135deg,#e7ede4 0 8px,#f5f7f2 8px 16px); }
.composicion-mueble__piso { position:absolute; right:0; bottom:0; left:0; height:47px; background:linear-gradient(180deg,#ead5b8,#dfc19a); border-top:1px solid #c5a57d; }
.module-help { margin:-4px 0 14px; color:#53705e; font-weight:700; }
.module-help.complete { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:10px 12px; border:1px solid #75a77f; border-radius:10px; background:#e4f3e2; color:#24643a; }
.module-help.complete::before { content:'✓'; display:grid; place-items:center; width:23px; height:23px; flex:0 0 23px; border-radius:50%; background:var(--verde); color:#fff; font-size:14px; font-weight:900; }
.design-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 36px) / 4); grid-template-columns:none; gap:12px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; padding:2px 2px 14px; scrollbar-color:#8db88b #edf3e9; }
.design-grid::-webkit-scrollbar { height:8px; }
.design-grid::-webkit-scrollbar-track { border-radius:99px; background:#e5eee1; }
.design-grid::-webkit-scrollbar-thumb { border:1px solid #e5eee1; border-radius:99px; background:var(--verde); }
.design-scroll-indicator { display:none; }
.design-card { position:relative; min-width:0; overflow:hidden; scroll-snap-align:start; border:1px solid #ccddc5; border-radius:12px; background:#fff; cursor:pointer; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.design-card:hover { border-color:var(--verde); transform:translateY(-2px); }
.design-card:focus-visible { outline:3px solid rgba(76,140,89,.28); outline-offset:2px; }
.design-card.selected { border-color:var(--verde); background:#e8f4e4; box-shadow:inset 0 0 0 2px var(--verde); }
.design-card.selected > img { outline:3px solid var(--verde); outline-offset:-3px; background:#e8f4e4; }
.design-card.selected::after { display:none; }
.design-remove { position:absolute; z-index:3; top:9px; right:9px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:2px solid #fff; border-radius:50%; background:#d94b3d; color:#fff; cursor:pointer; box-shadow:0 4px 11px rgba(126,30,24,.3); }
.design-remove[hidden] { display:none; }
.design-remove svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.design-remove:hover { background:#b83227; transform:scale(1.06); }
.design-remove:focus-visible { outline:3px solid rgba(217,75,61,.3); outline-offset:2px; }
.design-card.disabled { cursor:not-allowed; opacity:.5; transform:none; }
.design-card.selected.disabled { opacity:1; }
.design-card > img { display:block; width:100%; height:170px; object-fit:cover; background:#f0f5ed; }
.design-card > div { display:grid; grid-template-columns:1fr auto; gap:5px 8px; padding:10px 11px 6px; }
.design-card strong { color:var(--texto); white-space:nowrap; }
.design-card span { color:#637468; font-size:13px; }
.design-card b { grid-column:1/-1; color:#163d2b; font-size:16px; }
.quote-summary { position:sticky; top:16px; padding:18px; border:1px solid #d9e5d4; border-radius:14px; background:#f5f9f2; }
.quote-summary h2 { margin:3px 0 7px; color:#163d2b; font-family:Georgia,serif; font-size:31px; }
.quote-summary .white-reference { display:flex; align-items:baseline; gap:5px; flex-wrap:nowrap; margin:0 0 6px; color:#496256; font-size:11px; font-weight:800; letter-spacing:.035em; white-space:nowrap; }
.quote-summary .white-reference[hidden] { display:none; }
.quote-summary .white-reference strong { color:var(--verde-oscuro); font-size:13px; letter-spacing:0; }
.quote-summary > p:not(.panel-label) { margin:0 0 14px; color:#627268; font-size:13px; line-height:1.4; }
.chosen-modules { display:grid; gap:7px; margin:13px 0 17px; }
.chosen-modules > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px; border:1px solid #d5e4d0; border-radius:8px; background:#fff; font-size:13px; }
.chosen-module-image { display:none; width:38px; height:38px; flex:0 0 38px; border:1px solid #dce7d7; border-radius:6px; object-fit:contain; background:#f7f8f5; }
.chosen-modules > div > span { flex:1; }
.chosen-modules button { width:25px; height:25px; border:0; border-radius:50%; background:#f7e2de; color:#a43c30; font-size:20px; line-height:1; cursor:pointer; }
.chosen-modules > p { margin:0; color:#718077; font-size:13px; }
.quote-summary .primary-button { width:100%; margin:0; }
.quote-actions { display:grid; gap:10px; margin-top:18px; }
.quote-actions[hidden] { display:none; }
.quote-action { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; min-height:54px; padding:11px 14px; border:1px solid transparent; border-radius:12px; font:inherit; font-weight:750; text-decoration:none; text-align:left; cursor:pointer; transition:background .15s; }
.quote-action svg { flex:0 0 26px; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.quote-action small { display:block; margin-top:3px; font-size:12px; font-weight:400; }
.action-save { background:#4e8d5b; color:#fff; }
.action-save:hover { background:#3b7447; }
.action-render { background:#fff; border-color:#719d79; color:#245b37; }
.action-render:hover { background:#eef5eb; }
.action-whatsapp { background:#e4f5e9; border-color:#a6d6b3; color:#166534; }
.action-whatsapp:hover { background:#d5efdd; }
.quote-action:disabled { opacity:.6; cursor:not-allowed; }
.quote-action:focus-visible { outline:3px solid #163d2b; outline-offset:3px; }
.quote-summary .secondary-button { width:100%; margin-top:10px; padding:13px 16px; border:1px solid #4e9160; border-radius:11px; background:#fff; color:#28723d; font:inherit; font-weight:800; cursor:pointer; }
.quote-summary .secondary-button:disabled { cursor:not-allowed; opacity:.55; }
@media (max-width: 760px) { .page-shell,.quote-page { padding:10px; } .hero-card,.quote-card { padding:18px; border-radius:20px; } .brand-row { padding-bottom:14px; } .content-grid { grid-template-columns:1fr; gap:16px; padding-top:20px; } .start-panel { padding:14px; } .secondary-link { margin-top:14px; } .footnote { margin-top:16px; padding-top:13px; } .steps { display:grid; grid-template-columns:1fr; margin-top:20px; } .customer-grid,.dimension-grid { grid-template-columns:1fr; gap:0; } .quote-header { flex-wrap:wrap; margin-bottom:16px; } .quote-header .secondary-link { margin-left:auto; } .color-picker-layout { grid-template-columns:1fr; } .color-large-preview { min-height:0; order:-1; } .color-large-preview img { height:260px; } .module-layout { grid-template-columns:1fr; gap:10px; } .visual-module-preview { margin-bottom:0; } .quote-summary { position:static; } .quote-summary > .render-result { margin:8px 0 12px; padding:12px; } .quote-summary > .render-result h2 { font-size:22px; } .design-grid { grid-auto-columns:minmax(155px,72vw); overflow-x:scroll; padding-bottom:8px; scrollbar-width:none; } .design-grid::-webkit-scrollbar { display:none; } .design-scroll-indicator:not([hidden]) { display:block; height:7px; margin:2px 2px 15px; overflow:hidden; border-radius:99px; background:#e3ede0; } .design-scroll-indicator span { display:block; width:var(--scroll-thumb-width,30%); height:100%; border-radius:99px; background:var(--verde); transform:translateX(var(--scroll-thumb-x,0)); transition:transform .08s linear; } .design-card > img { height:145px; } .viewer-3d,.viewer-3d > p { min-height:220px; } .viewer-3d canvas { height:300px; } .chosen-module-image { display:block; } }
@media (max-width:760px) {
  .limited-options-notice { display:block; padding:13px 14px; font-size:13px; line-height:1.45; }
  .limited-options-notice strong { display:block; margin-bottom:6px; font-size:14px; line-height:1.3; }
  .limited-options-notice span { display:block; }
}