/* ==========================================================================
   SPACELAP · Modal de compra — fase 1
   Usa los tokens del sitio (--ink, --studio, --radius-*, --motion-*) con
   valores de respaldo, para funcionar en cualquier página.
   Escritorio: dos columnas (opciones | resumen, entrega, condiciones).
   Móvil (≤ 760px): una columna con desplazamiento y «Continuar» fijo abajo.
   ========================================================================== */
html.co-lock{ overflow: hidden; scrollbar-gutter: stable; }

.co{
  --co-ink: var(--ink, #111114);
  --co-ink-2: var(--ink-2, #4B4C55);
  --co-ink-3: var(--ink-3, #8A8B95);
  --co-studio: var(--studio, #F4F4F6);
  --co-studio-2: var(--studio-2, #E9EAEE);
  --co-line: rgba(17,17,20,.10);
  --co-line-2: rgba(17,17,20,.17);
  --co-signal: var(--signal, #F03A30);
  --co-ease: var(--ease-out, cubic-bezier(.16,1,.3,1));
  --co-fast: var(--motion-fast, .22s);
  --co-pad: clamp(20px, 2.6vw, 34px);
  --co-radius: 16px;

  box-sizing: border-box;
  padding: 0; border: 0; margin: auto;
  width: min(1000px, calc(100vw - 48px)); max-width: none;
  height: min(840px, calc(100vh - 48px));
  height: min(840px, calc(100dvh - 48px));
  max-height: none;
  border-radius: var(--radius-l, 28px);
  background: #fff; color: var(--co-ink);
  font-family: var(--font-display, "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
  font-size: 16px; line-height: 1.45; text-align: left;
  color-scheme: light;
  overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(17,17,20,.06);
}
.co *, .co *::before, .co *::after{ box-sizing: border-box; }
.co [hidden]{ display: none !important; }
.co[open]{
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "left right" "left foot";
}
.co::backdrop{ background: rgba(8,8,10,.56); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.co-form, .co-scroll{ display: contents; }
.co-sr{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:where(.co) p{ margin: 0; }
:where(.co) button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.co :focus-visible{ outline: 2px solid var(--co-signal); outline-offset: 3px; }

/* ---------- Cabecera ---------- */
.co-head{
  grid-area: head; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 84px; padding: 18px 76px;
  border-bottom: 1px solid var(--co-line);
}
.co-title{
  margin: 0; text-align: center; text-wrap: balance;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08;
}
.co-title:focus{ outline: none; }
.co-close{
  position: absolute; right: 20px; top: 50%; translate: 0 -50%;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--co-studio-2); color: var(--co-ink);
  transition: background var(--co-fast);
}
.co-close:hover{ background: #DCDDE3; }

/* ---------- Columnas ---------- */
.co-left{
  grid-area: left; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--co-studio); border-right: 1px solid var(--co-line);
  padding: var(--co-pad); display: flex; flex-direction: column; gap: 28px;
}
.co-right{
  grid-area: right; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 0 var(--co-pad) var(--co-pad); display: flex; flex-direction: column; gap: 22px;
}

/* ---------- Ubicación fija ---------- */
.co-loc{
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px 16px;
  background: #fff; border-radius: var(--co-radius); box-shadow: inset 0 0 0 1px var(--co-line-2);
}
.co-loc > svg{ flex: none; color: var(--co-ink-2); }
.co-loc-text{ display: flex; flex-direction: column; line-height: 1.2; }
.co-loc-label{ font-size: .74rem; color: var(--co-ink-3); font-weight: 500; }
.co-loc-value{ font-size: 1rem; font-weight: 600; }

/* ---------- Grupos ---------- */
.co-group, .co-delivery{ border: 0; margin: 0; padding: 0; min-width: 0; }
.co-legend{ padding: 0; margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
.co-list{ display: grid; gap: 10px; }
.co-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Opción (radio real, visualmente oculto; la tarjeta es el <span>) */
.co-opt{ position: relative; display: block; cursor: pointer; }
.co-input{
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none;
}
.co-box{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 58px; padding: 10px 14px; text-align: center;
  background: #fff; border-radius: var(--co-radius);
  box-shadow: inset 0 0 0 1px var(--co-line-2);
  transition: box-shadow var(--co-fast) var(--co-ease), background var(--co-fast);
}
.co-opt:hover .co-input:not(:disabled):not(:checked) + .co-box{ box-shadow: inset 0 0 0 1px rgba(17,17,20,.45); }
.co-input:checked + .co-box{ box-shadow: inset 0 0 0 2px var(--co-ink); }
.co-input:focus-visible + .co-box{ outline: 2px solid var(--co-signal); outline-offset: 3px; }
.co-input:disabled + .co-box{ cursor: not-allowed; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--co-line); color: var(--co-ink-3); }
.co-input:disabled + .co-box .co-opt-title{ text-decoration: line-through; text-decoration-color: rgba(17,17,20,.3); }
.co-opt:has(.co-input:disabled){ cursor: not-allowed; }
.co-opt-title{ font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.co-opt-sub{ font-size: .78rem; font-weight: 500; color: var(--co-ink-3); line-height: 1.3; font-variant-numeric: tabular-nums; }
.co-opt-sub:empty{ display: none; }

/* Marcas: rejilla compacta. Computadoras: modelos en dos columnas para que
   Color, Capacidad, Tamaño y Descripción queden a la vista. */
.co-brands{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.co-brands .co-box{ min-height: 44px; padding: 8px 4px; }
.co-brands .co-opt-title{ font-size: .92rem; }
.co[data-category="computadoras"] [data-list="model"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.co[data-category="computadoras"] [data-list="model"] .co-box{ min-height: 60px; padding: 8px 10px; }
.co[data-category="computadoras"] .co-left{ gap: 24px; }

/* Descripción: datos fijos de productos no personalizables */
.co-desc{ padding-top: 18px; border-top: 1px solid var(--co-line); }
.co-desc .co-legend{ margin-bottom: 8px; }
.co-desc-text{ font-size: .9rem; line-height: 1.5; color: var(--co-ink-2); }
.co-desc-list{ margin: 10px 0 0; display: grid; gap: 0; }
.co-desc-list > div{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--co-line);
}
.co-desc-list > div:first-child{ border-radius: 12px 12px 0 0; }
.co-desc-list > div:last-child{ border-radius: 0 0 12px 12px; }
.co-desc-list > div:only-child{ border-radius: 12px; }
.co-desc-list > div + div{ margin-top: -1px; }
.co-desc-list dt{ font-size: .86rem; color: var(--co-ink-2); flex: none; }
.co-desc-list dd{ margin: 0; font-size: .9rem; font-weight: 600; text-align: right; }

/* Colores: muestra + nombre */
.co-swatches{ display: flex; flex-wrap: wrap; gap: 6px 2px; margin-inline: -6px; }
.co-sw{
  position: relative; width: 70px; padding: 6px 2px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; text-align: center; border-radius: 12px;
}
.co-sw-dot{
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(17,17,20,.2);
}
.co-sw-dot::after{
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--co-ink); opacity: 0; transform: scale(.88);
  transition: opacity var(--co-fast) var(--co-ease), transform var(--co-fast) var(--co-ease);
}
.co-input:checked + .co-sw-dot::after{ opacity: 1; transform: none; }
.co-input:focus-visible + .co-sw-dot{ outline: 2px solid var(--co-signal); outline-offset: 8px; }
.co-sw-name{ font-size: .78rem; font-weight: 500; line-height: 1.2; color: var(--co-ink-2); }
.co-input:checked ~ .co-sw-name{ color: var(--co-ink); font-weight: 600; }
.co-sw-sub{ margin-top: -4px; font-size: .7rem; }
.co-input:disabled + .co-sw-dot{ opacity: .38; }
.co-input:disabled + .co-sw-dot::before{
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; margin-left: -.75px;
  background: var(--co-ink-2); transform: rotate(45deg); border-radius: 2px;
}
.co-input:disabled ~ .co-sw-name{ color: var(--co-ink-3); }
.co-sw:has(.co-input:disabled){ cursor: not-allowed; }

/* Mensajes por grupo */
.co-msg{ margin: 10px 0 0; font-size: .82rem; line-height: 1.4; font-weight: 500; }
.co-msg.is-note{ color: var(--co-ink); padding-left: 14px; position: relative; }
.co-msg.is-note::before{ content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--co-signal); }
.co-msg.is-error{ color: #B42318; }
.co-msg.is-muted{ color: var(--co-ink-3); font-weight: 400; }

/* ---------- Resumen ---------- */
.co-summary{
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 0 18px; background: #fff; border-bottom: 1px solid var(--co-line);
}
.co-thumb{
  flex: none; width: 78px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--co-line);
  display: grid; place-items: center;
}
.co-thumb picture, .co-thumb img{ display: block; width: 100%; height: 100%; }
.co-thumb img{ object-fit: contain; }
.co-thumb.is-empty{ background: var(--co-studio); }
.co-ph{
  width: 38%; aspect-ratio: 9 / 19; border-radius: 7px;
  background: var(--ph, #DADBE0); box-shadow: inset 0 0 0 1px rgba(17,17,20,.16);
}
.co[data-category="computadoras"] .co-thumb{ width: 112px; aspect-ratio: 4 / 3; background: var(--co-studio); padding: 6px; }
.co[data-category="computadoras"] .co-ph{ width: 70%; aspect-ratio: 16 / 10; border-radius: 5px; }
.co-sum-text{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-sum-name{ font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.co-sum-meta{ font-size: .9rem; color: var(--co-ink-2); }
.co-sum-price{ margin-top: 4px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.co-from{ font-size: .88rem; font-weight: 500; color: var(--co-ink-2); }
.co-demo{
  align-self: flex-start; margin-top: 6px;
  padding: 2px 9px; border-radius: 999px;
  background: #FFF2DE; color: #7A4300; font-size: .7rem; font-weight: 600; letter-spacing: .01em;
}

/* ---------- Entrega ---------- */
.co-delivery{ display: flex; flex-direction: column; gap: 10px; }
.co-h3{ margin: 6px 0 2px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
.co-dl .co-box{ flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; text-align: left; }
.co-dl-icon{ flex: none; display: grid; place-items: center; width: 24px; color: var(--co-ink-2); }
.co-dl-text{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.co-eta{ color: var(--co-ink-2); font-size: .84rem; }
.co-dot{
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--co-line-2);
  transition: box-shadow var(--co-fast) var(--co-ease);
}
.co-input:checked + .co-box .co-dot{ box-shadow: inset 0 0 0 6px var(--co-ink); }
.co-ship{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.co-ship .co-dl .co-box{ align-items: flex-start; min-height: 76px; }
.co-ship .co-dl .co-dot{ margin-top: 2px; }
.co-points{ display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; padding-left: 16px; border-left: 2px solid var(--co-line); }
.co-points-label{ font-size: .82rem; font-weight: 500; color: var(--co-ink-2); }
.co-point .co-box{ min-height: 52px; }

/* ---------- Condiciones ---------- */
.co-terms{
  margin: 4px 0 0; padding: 18px 0 0 1.2rem; border-top: 1px solid var(--co-line);
  display: flex; flex-direction: column; gap: 6px;
  font-size: .78rem; line-height: 1.55; color: var(--co-ink-2);
}
.co-terms li::marker{ color: var(--co-ink-3); font-variant-numeric: tabular-nums; }
.co-terms a{ color: var(--co-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ---------- Pie · Continuar ---------- */
.co-foot{
  grid-area: foot; display: flex; flex-direction: column; gap: 8px;
  padding: 14px var(--co-pad) 20px; background: #fff; border-top: 1px solid var(--co-line);
}
.co-hint{ font-size: .82rem; color: var(--co-ink-2); min-height: 1.2em; }
.co-hint.is-ready{ color: var(--co-ink); font-weight: 500; }
.co-foot-row{ display: flex; align-items: center; gap: 14px; }
.co-foot-sum{ display: none; }
.co-continue{
  flex: 1; height: 54px; padding: 0 1.6rem; border-radius: var(--radius-pill, 999px);
  background: var(--co-ink); color: #fff;
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
  transition: background var(--co-fast), transform var(--co-fast) var(--co-ease);
}
.co-continue:hover{ background: #000; }
.co-continue:active{ transform: scale(.99); }
.co-continue[aria-disabled="true"]{ background: var(--co-studio-2); color: var(--co-ink-3); cursor: not-allowed; transform: none; }

/* ---------- Confirmación ---------- */
.co-done{ grid-area: 2 / 1 / 4 / -1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: var(--co-pad); }
.co-done-card{ width: min(460px, 100%); display: flex; flex-direction: column; gap: 14px; }
.co-done-check{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--co-ink); color: #fff; }
.co-done-title{ margin: 0; font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.co-done-title:focus{ outline: none; }
.co-done-list{ margin: 4px 0 0; border-top: 1px solid var(--co-line); }
.co-done-list > div{ display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--co-line); font-size: .95rem; }
.co-done-list dt{ color: var(--co-ink-2); }
.co-done-list dd{ margin: 0; font-weight: 600; text-align: right; }
.co-done-note{ font-size: .86rem; color: var(--co-ink-2); }
.co-done-phase{ font-size: .78rem; color: var(--co-ink-3); }
.co-done-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.co-btn{ height: 48px; padding: 0 1.4rem; border-radius: var(--radius-pill, 999px); font-weight: 600; font-size: .95rem; }
.co-btn-dark{ background: var(--co-ink); color: #fff; }
.co-btn-dark:hover{ background: #000; }
.co-btn-ghost{ box-shadow: inset 0 0 0 1px var(--co-line-2); }
.co-btn-ghost:hover{ box-shadow: inset 0 0 0 1px rgba(17,17,20,.45); }

/* ---------- Visores que estiran el marco (ver place() en checkout.js) ---------- */
.co.is-framed{ inset-block: auto; top: var(--co-top, 24px); margin-block: 0; height: min(840px, calc(var(--co-vh, 900px) - 48px)); }

/* ---------- Móvil: una columna, «Continuar» siempre visible ---------- */
@media (max-width: 760px){
  .co{
    width: 100%; margin: auto 0 0;
    height: calc(100vh - 10px); height: calc(100dvh - 10px);
    border-radius: 22px 22px 0 0;
  }
  .co[open]{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "foot"; }
  .co-scroll{ display: block; grid-area: body; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .co-left, .co-right{ overflow: visible; min-height: auto; }
  .co-left{ border-right: 0; padding: 20px 18px 26px; gap: 24px; }
  .co-right{ padding: 0 18px 28px; }
  .co-summary{ position: static; padding-top: 20px; }
  .co-head{ min-height: 64px; padding: 14px 56px; }
  .co-title{ font-size: 1.2rem; }
  .co-close{ right: 12px; width: 40px; height: 40px; }
  .co-foot{ padding: 10px 18px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -14px 28px -22px rgba(0,0,0,.35); }
  .co-hint{ font-size: .78rem; }
  .co-foot-sum{ display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
  .co-foot-price{ font-weight: 600; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
  .co-foot-name{ font-size: .76rem; color: var(--co-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .co-continue{ flex: none; height: 50px; }
  .co.is-framed{ height: var(--co-vh, 800px); border-radius: 22px; margin-inline: 0; }
}
@media (max-width: 520px){
  .co-ship{ grid-template-columns: minmax(0, 1fr); }
  .co-ship .co-dl .co-box{ align-items: center; min-height: 64px; }
  .co-ship .co-dl .co-dot{ margin-top: 0; }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference){
  .co[open]{ animation: co-in .42s var(--co-ease) both; }
  .co[open]::backdrop{ animation: co-fade .3s ease both; }
  .co.is-closing{ animation: co-out .2s ease-in both; }
  .co.is-closing::backdrop{ animation: co-fade .2s ease-in reverse both; }
  @media (max-width: 760px){
    .co[open]{ animation-name: co-sheet-in; animation-duration: .46s; }
    .co.is-closing{ animation-name: co-sheet-out; animation-duration: .22s; }
  }
}
@keyframes co-in{ from{ opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes co-out{ to{ opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes co-sheet-in{ from{ transform: translateY(40px); opacity: 0; } }
@keyframes co-sheet-out{ to{ transform: translateY(40px); opacity: 0; } }
@keyframes co-fade{ from{ opacity: 0; } }