/* ==========================================================================
   KH Smart Project — estilos SOLO de /start-project/
   Paleta corporativa: naranja, azul marino, grises, blanco y negro.
   Contraste (WCAG AA, verificado):
     blanco sobre marino 16.6:1 · gris claro #C9D1E0 sobre marino 10.8:1
     naranja #FF5C00 sobre marino 5.3:1 · texto marino-negro sobre naranja 6.2:1
     marino sobre blanco 16:1 · gris #4A5568 sobre blanco 7.5:1
     naranja oscuro #B84000 (texto sobre claro) 5.6:1
   NUNCA texto blanco sobre naranja (solo 3.1:1) — los botones usan texto oscuro.
   ========================================================================== */

body.sp-page {
  --sp-black: #06101F;
  --sp-navy: #0B1E3D;
  --sp-navy-2: #16305C;
  --sp-orange: #FF5C00;
  --sp-orange-2: #FF7A1F;
  --sp-orange-soft: #FF8A3D;   /* texto naranja sobre fondo oscuro */
  --sp-orange-ink: #B84000;    /* texto naranja sobre fondo claro  */
  --sp-gray-50: #F4F5F7;
  --sp-gray-100: #EEF1F6;
  --sp-gray-200: #D5DAE3;
  --sp-gray-300: #C9D1E0;
  --sp-gray-600: #4A5568;
  --sp-grad-navy: linear-gradient(135deg, #06101F 0%, #0B1E3D 55%, #16305C 100%);
  --sp-grad-orange: linear-gradient(135deg, #FF7A1F 0%, #FF5C00 100%);
}

/* ---------- Botones de esta página ---------- */
body.sp-page .btn-primary,
body.sp-page .btn-primary:visited {
  background: var(--sp-grad-orange); color: var(--sp-black); border-color: transparent; font-weight: 700;
}
body.sp-page .btn-primary:hover { filter: brightness(1.06); color: var(--sp-black); }
body.sp-page .btn-secondary { background: #fff; color: var(--sp-navy); border: 2px solid var(--sp-navy); }
body.sp-page .btn-secondary:hover { background: var(--sp-navy); color: #fff; border-color: var(--sp-navy); }
body.sp-page .eyebrow { color: var(--sp-orange-ink); }
body.sp-page .section-title { color: var(--sp-navy); }

/* ---------- Hero ---------- */
body.sp-page .sp-hero {
  background: var(--sp-grad-navy);
  border-bottom: 4px solid var(--sp-orange);
  padding-bottom: var(--space-xl);
}
body.sp-page .sp-hero::before {            /* plano de rótulo como marca de agua */
  inset: 0; filter: none; transform: none; opacity: .13;
  background-image: url("/assets/images/start-project/blueprint-dark.svg");
  background-repeat: no-repeat; background-size: 980px auto; background-position: right -120px center;
}
body.sp-page .sp-hero::after {             /* resplandor naranja, deja ver el plano */
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(255, 92, 0, .30), rgba(255, 92, 0, 0) 62%),
    linear-gradient(90deg, rgba(6, 16, 31, .55), rgba(6, 16, 31, 0) 60%);
}
body.sp-page .sp-hero .eyebrow { color: var(--sp-orange-soft); }
body.sp-page .sp-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-lg); align-items: center; }
body.sp-page .sp-hero-title { text-transform: uppercase; max-width: 14ch; color: #fff; }
body.sp-page .sp-hero .page-hero-sub { color: var(--sp-gray-300); }
body.sp-page .sp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-md); }
body.sp-page .sp-hero .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border: 2px solid rgba(255,255,255,.55); }
body.sp-page .sp-hero .btn-secondary:hover { background: #fff; color: var(--sp-navy); border-color: #fff; }

.sp-process {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: var(--space-md) 0 0; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-gray-300);
}
.sp-process li + li::before { content: "→"; color: var(--sp-orange-soft); margin: 0 10px; }

body.sp-page .sp-hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.sp-page .sp-hero-collage img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
body.sp-page .sp-hero-collage img:first-child { grid-row: span 2; object-position: 50% 30%; }
body.sp-page .sp-hero-collage img:nth-child(2) { object-position: 50% 18%; }
body.sp-page .sp-hero-collage img:nth-child(3) { object-position: 50% 22%; }
body.sp-page .sp-hero-collage img:nth-child(4) { object-position: 40% 55%; }

/* ---------- App section ---------- */
.sp-app-section {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--sp-gray-100) 0%, #fff 100%);
  padding: var(--space-xl) 0; scroll-margin-top: calc(var(--header-height) + 12px);
}
.sp-app-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background: url("/assets/images/start-project/blueprint-light.svg") no-repeat left -160px bottom -40px / 1000px auto;
}
.sp-app { max-width: 1100px; margin: 0 auto; }
.sp-head { margin-bottom: var(--space-md); }
.sp-head .section-lede { color: var(--sp-gray-600); margin-top: 8px; }

.sp-test-banner {
  margin: 0 0 var(--space-md); padding: 10px 14px; border-radius: var(--radius-sm);
  background: #FFF1E6; border: 1px solid var(--sp-orange); border-left-width: 6px; color: #5C2200; font-size: 14px;
}
.sp-test-banner a { color: inherit; font-weight: 700; }
.sp-test-banner[hidden], .sp-head[hidden], .sp-cards[hidden], .sp-stage[hidden], .sp-resume[hidden] { display: none; }

.sp-resume {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px 18px; margin-bottom: var(--space-md); background: #fff; border: 1px solid var(--sp-gray-200);
  border-left: 5px solid var(--sp-orange); border-radius: var(--radius-sm); color: var(--sp-navy);
}
.sp-resume-text { margin: 0; }
.sp-resume-actions { display: flex; gap: 8px; }

/* ---------- Tarjetas de categoría ---------- */
.sp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sp-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: #fff;
  background: var(--sp-grad-navy); border: 1px solid var(--sp-navy); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(6,16,31,.14);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sp-card:hover, .sp-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(6,16,31,.28); border-color: var(--sp-orange); }
.sp-card:focus-visible { outline: 3px solid var(--sp-orange); outline-offset: 2px; }
.sp-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--sp-navy); object-position: 50% 50%; }
/* Encuadre: siempre el producto, no el entorno */
.sp-card[data-sp-category="channel-letters"] img { object-position: 45% 32%; }
.sp-card[data-sp-category="storefront"] img { object-position: 50% 14%; }
.sp-card[data-sp-category="monument-pylon"] img { object-position: 50% 24%; }
.sp-card[data-sp-category="interior"] img { object-position: 50% 38%; }
.sp-card[data-sp-category="window-graphics"] img { object-position: 50% 52%; }
.sp-card[data-sp-category="vehicle"] img { object-position: 28% 58%; }
.sp-card[data-sp-category="printing"] img { object-position: 50% 62%; }
.sp-card[data-sp-category="apparel"] img { object-position: 50% 62%; }
.sp-card-icon {
  display: grid; place-items: center; aspect-ratio: 4/3; color: var(--sp-orange);
  background:
    url("/assets/images/start-project/blueprint-dark.svg") center / 260% auto no-repeat,
    linear-gradient(135deg, #16305C, #06101F);
  background-blend-mode: soft-light, normal;
}
.sp-card-icon svg { width: 42%; height: 42%; }
.sp-card-label {
  padding: 12px 14px 14px; font-weight: 700; font-size: 15px; line-height: 1.25; color: #fff;
  border-top: 3px solid var(--sp-orange); background: linear-gradient(180deg, #0B1E3D, #06101F);
}

/* ---------- Flow ---------- */
.sp-flow {
  background: #fff; border: 1px solid var(--sp-gray-200); border-top: 5px solid var(--sp-orange);
  border-radius: var(--radius-md); padding: var(--space-md); max-width: 820px; margin: 0 auto;
  box-shadow: 0 18px 44px rgba(6,16,31,.12); color: var(--sp-navy);
}
.sp-flow[hidden] { display: none; }
.sp-panel { transition: opacity .25s ease, transform .25s ease; }
.sp-panel.is-entering { opacity: 0; transform: translateY(8px); }

.sp-top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-md); }
.sp-top-mid { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-top-text { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-gray-600); }
.sp-progress { height: 8px; border-radius: 99px; background: var(--sp-gray-200); overflow: hidden; }
.sp-progress-bar { display: block; height: 100%; background: var(--sp-grad-orange); border-radius: 99px; transition: width .3s ease; }

.sp-link-btn {
  background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 700; color: var(--sp-navy);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px;
}
.sp-link-btn:hover { color: var(--sp-orange-ink); }
.sp-link-btn:focus-visible, .sp-choice:focus-within, .sp-drop:focus-within { outline: 3px solid var(--sp-orange); outline-offset: 2px; }

.sp-chip {
  display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; background: var(--sp-grad-navy); color: #fff;
}
.sp-step-title { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 8px; outline: none; color: var(--sp-navy); }
.sp-step-help { color: var(--sp-gray-600); margin: 0 0 var(--space-md); max-width: 60ch; }
.sp-note { font-size: 14px; color: var(--sp-gray-600); margin: 8px 0 0; }
.sp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Opciones ---------- */
.sp-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sp-choices--dense { grid-template-columns: repeat(2, 1fr); }
.sp-choice {
  position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; min-height: 56px; cursor: pointer;
  background: #fff; color: var(--sp-navy); border: 2px solid var(--sp-gray-200); border-radius: var(--radius-sm);
  transition: border-color .2s ease, background .2s ease;
}
.sp-choice:hover { border-color: var(--sp-navy-2); background: var(--sp-gray-50); }
.sp-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-choice-tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--sp-gray-600); border-radius: 50%; background: #fff; position: relative; }
.sp-choice input[type="checkbox"] ~ .sp-choice-tick { border-radius: 6px; }
.sp-choice:has(input:checked) { border-color: var(--sp-orange); background: #FFF1E6; }
.sp-choice input:checked ~ .sp-choice-tick { background: var(--sp-navy); border-color: var(--sp-navy); }
.sp-choice input:checked ~ .sp-choice-tick::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sp-choice-text { display: flex; flex-direction: column; gap: 2px; }
.sp-choice-label { font-weight: 700; line-height: 1.3; }
.sp-choice-hint { font-size: 13px; color: var(--sp-gray-600); }

/* ---------- Medidas / cantidad / texto ---------- */
.sp-size-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--space-sm); }
.sp-size-fields[hidden] { display: none; }
.sp-size-fields .sp-note { grid-column: 1 / -1; margin: 0; }
.sp-count { max-width: 220px; }
.sp-text textarea { width: 100%; min-height: 150px; }
.sp-counter { text-align: right; }
body.sp-page .sp-flow .quote-field label { color: var(--sp-navy); font-weight: 700; }
body.sp-page .sp-flow .quote-field input, .sp-flow .quote-field textarea, .sp-flow .quote-field select { color: var(--sp-black); background: #fff; border: 2px solid var(--sp-gray-200); }
body.sp-page .sp-flow .quote-field input:focus, .sp-flow .quote-field textarea:focus, .sp-flow .quote-field select:focus { border-color: var(--sp-orange); outline: 2px solid var(--sp-orange); outline-offset: 1px; }

/* ---------- Archivos ---------- */
.sp-file-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 28px 16px; cursor: pointer;
  border: 2px dashed var(--sp-navy-2); border-radius: var(--radius-sm); background: var(--sp-gray-50); color: var(--sp-navy);
  transition: border-color .2s ease, background .2s ease;
}
.sp-drop:hover, .sp-drop.is-over { border-color: var(--sp-orange); background: #FFF1E6; }
.sp-drop-icon svg { width: 34px; height: 34px; color: var(--sp-orange-ink); }
.sp-drop-title { font-weight: 700; }
.sp-drop-sub { font-size: 13px; color: var(--sp-gray-600); }
.sp-file-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: 8px; }
.sp-file { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius, 12px); background: #fff; }
.sp-file-thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; background: var(--sp-gray-200) center/cover no-repeat; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--sp-navy); }
.sp-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; color: var(--sp-navy); }
.sp-file-size { font-size: 12px; color: var(--sp-gray-600); }
.sp-file-remove { background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1; padding: 10px; min-width: 44px; min-height: 44px; color: var(--sp-gray-600); }
.sp-file-remove:hover { color: #B3261E; }
.sp-file-msg { color: #B3261E; }

/* ---------- Ayudas (galería / comparar) ---------- */
.sp-actions-wrap { margin-top: var(--space-md); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-action {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 700;
  background: #fff; color: var(--sp-navy); border: 2px solid var(--sp-navy); border-radius: 99px; cursor: pointer; text-decoration: none;
}
.sp-action:hover { background: var(--sp-navy); color: #fff; }
.sp-extra { margin-top: var(--space-md); padding: var(--space-sm); background: var(--sp-gray-100); border-radius: var(--radius-sm); }
.sp-extra[hidden] { display: none; }
.sp-extra-title { font-weight: 700; margin: 0 0 12px; color: var(--sp-navy); }
.sp-extra-foot { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.sp-gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-shot { margin: 0; }
.sp-shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 35%; border-radius: 8px; display: block; }
.sp-shot figcaption { font-size: 12px; margin-top: 4px; color: var(--sp-gray-600); }
body.sp-page .sp-flow .text-link { color: var(--sp-navy); border-bottom-color: var(--sp-orange); font-weight: 700; }

.sp-compare-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-compare-item { display: flex; gap: 14px; align-items: center; padding: 10px; background: #fff; border: 1px solid var(--sp-gray-200); border-radius: var(--radius-sm); }
.sp-compare-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sp-compare-title { font-weight: 700; color: var(--sp-navy); }
.sp-compare-text { font-size: 13px; color: var(--sp-gray-600); }
.sp-use { margin-top: 4px; padding: 8px 14px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sp-black); background: var(--sp-grad-orange); border: 0; border-radius: 99px; cursor: pointer; }
.sp-use:hover { filter: brightness(1.06); }

.sp-prev {
  flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 10px; background: var(--sp-grad-navy);
  font-size: 46px; font-weight: 800; color: #fff; line-height: 1;
}
.sp-prev--front { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.5); }
.sp-prev--halo { color: #06101F; text-shadow: 0 0 6px #fff, 0 0 16px rgba(255,255,255,.8); }
.sp-prev--both { color: #fff; text-shadow: 0 0 8px #fff, 0 0 20px rgba(255,92,0,.8); }
.sp-prev--reverse { color: #16305C; text-shadow: 0 0 8px var(--sp-orange), 0 0 18px rgba(255,92,0,.6); }
.sp-prev--rgb { color: #fff; text-shadow: -6px 0 12px #ff3b6b, 0 0 14px #1ec8ff, 6px 0 12px #8e5bff; }

/* ---------- Navegación ---------- */
.sp-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-md); }
.sp-nav .sp-next { margin-left: auto; }

/* ---------- Resumen ---------- */
.sp-summary { border: 1px solid var(--sp-gray-200); border-radius: var(--radius-sm); padding: var(--space-sm); background: var(--sp-gray-50); }
.sp-summary-head { display: flex; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--sp-gray-200); }
.sp-summary-head > div { flex: 1; min-width: 0; }
.sp-summary-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; }
.sp-summary-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-summary-kicker { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-gray-600); }
.sp-summary-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--sp-navy); }
.sp-rows { margin: 0; }
.sp-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sp-gray-200); align-items: start; }
.sp-row:last-child { border-bottom: 0; }
.sp-row dt { font-weight: 700; font-size: 14px; color: var(--sp-navy); }
.sp-row dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; color: var(--sp-black); }
.sp-suggest { margin-top: var(--space-md); padding: var(--space-sm); border: 2px solid var(--sp-orange); border-radius: var(--radius-sm); background: #FFF1E6; color: var(--sp-navy); }
.sp-suggest-title { margin: 0; font-weight: 700; }
.sp-suggest .btn { margin-top: 10px; }
.sp-disclaimer { margin-top: var(--space-sm); }

/* ---------- Contacto ---------- */
.sp-contact .quote-field-grid { margin-bottom: var(--space-sm); }
.sp-req { color: var(--sp-orange-ink); }
.sp-opt { color: var(--sp-gray-600); font-weight: 400; font-size: 13px; }
.sp-field-error, .sp-send-error { color: #B3261E; font-size: 14px; margin: 4px 0 0; }
.sp-send-error { padding: 10px 14px; background: #FDECEA; border-radius: var(--radius-sm); margin-top: var(--space-sm); }
.sp-turnstile { margin-top: var(--space-sm); min-height: 65px; }
.sp-test-note { background: #FFF1E6; color: #5C2200; padding: 8px 12px; border-radius: 8px; }
.sp-flow a:not(.btn):not(.sp-action):not(.text-link) { color: var(--sp-navy); font-weight: 700; }

/* ---------- Explorar (sección oscura + plano) ---------- */
.sp-explore {
  position: relative; isolation: isolate; overflow: hidden; padding: var(--space-xl) 0; background: var(--sp-grad-navy); color: #fff;
}
.sp-explore::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .12;
  background: url("/assets/images/start-project/blueprint-dark.svg") no-repeat right -140px center / 1000px auto;
}
.sp-explore::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 80% at 0% 100%, rgba(255,92,0,.22), rgba(255,92,0,0) 65%);
}
.sp-explore .section-title { color: #fff; }
.sp-explore-links { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sp-explore-links a {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; min-height: 56px; font-weight: 700; text-decoration: none;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sp-explore-links a:hover, .sp-explore-links a:focus-visible { background: var(--sp-grad-orange); color: var(--sp-black); border-color: transparent; }
.sp-explore-links a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Texto SEO ---------- */
.sp-seo { padding: var(--space-xl) 0; background: linear-gradient(180deg, #fff, var(--sp-gray-100)); color: var(--sp-gray-600); }
.sp-seo h2 { font-size: 20px; color: var(--sp-navy); margin-bottom: 8px; }
.sp-noscript { padding: 16px; background: #fff; color: var(--sp-navy); border-radius: var(--radius-sm); }
.sp-noscript a { color: var(--sp-navy); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sp-cards { grid-template-columns: repeat(3, 1fr); }
  .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-hero-collage { display: none; }
  .sp-hero::before { background-size: 760px auto; background-position: right -200px bottom -40px; }
  .sp-explore-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sp-app-section, .sp-explore, .sp-seo { padding: var(--space-lg) 0; }
  .sp-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sp-card-label { font-size: 14px; padding: 10px 12px 12px; }
  .sp-flow { padding: var(--space-sm); border-radius: var(--radius-sm); }
  .sp-choices, .sp-choices--dense { grid-template-columns: 1fr; }
  .sp-size-fields { grid-template-columns: 1fr 1fr; }
  .sp-size-fields .quote-field:nth-child(3) { grid-column: 1 / -1; }
  .sp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-row { grid-template-columns: 1fr auto; }
  .sp-row dd { grid-column: 1 / -1; grid-row: 2; }
  .sp-nav { flex-direction: column-reverse; }
  .sp-nav .btn { width: 100%; }
  .sp-nav .sp-next { margin-left: 0; }
  .sp-explore-links { grid-template-columns: 1fr; }
  .sp-hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-panel, .sp-card, .sp-progress-bar, .sp-choice, .sp-drop, .sp-explore-links a { transition: none; }
  .sp-card:hover, .sp-card:focus-visible { transform: none; }
  .sp-panel.is-entering { opacity: 1; transform: none; }
}

/* --- Correcciones de la revisión visual --- */
/* El atributo height del <img> anulaba aspect-ratio: forzar altura automática */
.sp-card img, .sp-shot img { height: auto; }
.sp-hero-collage img { height: 100%; }
/* El tema creative pinta títulos y subtítulos claros: reforzar en las secciones de esta página */
body.sp-page .sp-explore .section-title { color: #fff; }
body.sp-page .sp-head .section-lede { color: var(--sp-gray-600); }
body.sp-page .sp-head .section-title { color: var(--sp-navy); }
body.sp-page .sp-seo h2 { color: var(--sp-navy); }

body.sp-page .sp-quick { margin-top: 14px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--sp-orange-soft); }