*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.co-save-cart { margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border); }
.co-save-cart summary { cursor:pointer;font-size:.8rem;font-weight:600; }
.co-save-cart[open] summary { margin-bottom:.8rem; }
.co-save-cart-button { margin:.75rem 0;padding:.7rem 1rem;background:transparent;color:inherit;border:1px solid currentColor;border-radius:8px;font:inherit;font-size:.8rem;cursor:pointer; }
.co-save-cart-button:disabled { opacity:.6;cursor:wait; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #0a0a0a; background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; }
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
hr { border: 0; border-top: 1px solid #ececec; }
[hidden], .hidden { display: none !important; }
:root {
  --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f5f5f5;
  --border: #ececec; --border-2: #d4d4d4;
  --text: #0a0a0a; --text-2: #525252; --text-3: #737373; --text-4: #737373;
  --accent: #17191c; --accent-dark: #30343a; --acc: var(--accent);
  --control-border: #8a8a8a; --accent-ink: #17191c; --accent-ink-hover: #30343a;
  --ok: #15803d; --ok-bg: #f0fdf4;
  --err: #dc2626; --err-bg: #fef2f2;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.10);
  --radius: 10px; --radius-lg: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
::selection { background: var(--text); color: #fff; }
.checkout-shell { min-height: 100vh; display: flex; flex-direction: column; }
.checkout-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.checkout-header-inner { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checkout-logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); }
.checkout-logo-mark { width: 36px; height: 36px; background: var(--accent); color: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; }
.checkout-logo-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.checkout-logo-image { display: block; width: auto; height: auto; max-width: 140px; max-height: 52px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 480px) { .checkout-logo-image { max-width: 88px; max-height: 40px; } }
.checkout-header-badge { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--ok); }
.checkout-header-badge svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .checkout-header-inner { padding: 0 1rem; } .checkout-logo-name { font-size: 0.875rem; } }
.checkout-steps { border-bottom: 1px solid var(--border); background: var(--bg); }
.checkout-steps-inner { max-width: 1160px; margin: 0 auto; padding: 0.75rem 1.5rem; }
.steps-bar { display: flex; align-items: center; gap: 0; }
.step-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-4); flex-shrink: 0; }
.step-item.is-done { color: var(--ok); }
.step-item.is-active { color: var(--text); font-weight: 600; }
.step-num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; flex-shrink: 0; transition: all 200ms; }
.step-item.is-active .step-num { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.step-item.is-done .step-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.step-sep { flex: 1; height: 1px; background: var(--border); margin: 0 0.75rem; min-width: 24px; }
@media (max-width: 480px) { .checkout-steps-inner { padding: 0.625rem 1rem; } .step-label { display: none; } .step-sep { min-width: 12px; margin: 0 0.375rem; } }
.checkout-main { flex: 1; max-width: 1160px; margin: 0 auto; width: 100%; padding: 2.5rem 1.5rem 4rem; display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; }
@media (max-width: 960px) { .checkout-main { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem 1rem 3rem; } }
.form-section { margin-bottom: 2rem; }
.form-section:last-child { margin-bottom: 0; }
.section-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; }
.section-label svg { width: 14px; height: 14px; opacity: 0.6; }
.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
@media (max-width: 640px) { .field-grid-2 { grid-template-columns: 1fr; } }
.field-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); margin-bottom: 0.375rem; line-height: 1.4; }
.field-label .req { color: var(--err); margin-left: 0.125rem; }
.field-input, .field-select, .field-textarea { display: block; width: 100%; padding: 0.5625rem 0.875rem; font-size: 0.875rem; line-height: 1.5; color: var(--text); background: #ffffff; border: 1px solid var(--control-border); border-radius: 9px; transition: border-color 180ms, box-shadow 180ms; -webkit-appearance: none; appearance: none; }
.field-input:hover, .field-select:hover, .field-textarea:hover { border-color: var(--text-3); }
.field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgb(23 25 28 / 0.15); }
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-4); }
.field-input.has-error { border-color: var(--err); background: var(--err-bg); }
.field-hint { font-size: 0.75rem; color: var(--text-3); margin-top: 0.3125rem; line-height: 1.4; }
.co-marketing-choice { display: flex; align-items: flex-start; gap: .625rem; min-height: 44px; padding-block: .5rem; font-size: .8125rem; line-height: 1.5; cursor: pointer; }
.co-marketing-choice input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: .125rem; accent-color: var(--accent-ink); }
.co-marketing-choice input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.co-marketing .field-hint { margin-top: 0; padding-left: calc(18px + .625rem); line-height: 1.6; }
.field-error { font-size: 0.75rem; color: var(--err); margin-top: 0.3125rem; font-weight: 500; display: none; }
.field-error.show { display: block; }
.field-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; cursor: pointer; }
.field-textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.option-list { display: flex; flex-direction: column; gap: 0.625rem; }
.option-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border: 1.5px solid var(--control-border); border-radius: 11px; background: #fff; cursor: pointer; transition: border-color 160ms, background 160ms, box-shadow 160ms; }
.option-card:hover { border-color: var(--text-3); background: var(--bg-2); }
.option-card.is-selected { border-color: var(--accent-ink); background: rgb(23 25 28 / 0.04); box-shadow: 0 0 0 3px rgb(23 25 28 / 0.08); }
.option-card.is-loading { opacity: 0.65; pointer-events: none; }
.option-card.is-loading .option-card-body { opacity: 0.5; }
.option-loading-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 11px 11px; overflow: hidden; }
.option-loading-bar::after { content: ''; display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 0 2px 2px 0; animation: loadingBar 1.1s ease-in-out infinite; }
@keyframes loadingBar { 0% { transform: translateX(-150%); } 100% { transform: translateX(350%); } }
.option-radio { width: 18px; height: 18px; border: 1.5px solid var(--control-border); accent-color: var(--accent-ink); border-radius: 50%; flex-shrink: 0; margin-top: 0.125rem; position: relative; transition: border-color 160ms; }
.option-card.is-selected .option-radio { border-color: var(--accent-ink); }
.option-card.is-selected .option-radio::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
.option-card-body { flex: 1; min-width: 0; }
.option-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.option-card-name { font-size: 0.875rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.option-card-price { font-size: 0.875rem; font-weight: 700; color: var(--accent-ink); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
.option-card-price.is-gratis, .option-card-price.is-free { color: var(--ok); font-family: 'Inter', sans-serif; }
.option-card-desc { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.1875rem; line-height: 1.4; }
.no-options-msg { text-align: center; color: var(--text-3); font-size: 0.875rem; padding: 1.5rem 0; }
.alert { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.5; border: 1px solid transparent; }
.alert-error { background: var(--err-bg); border-color: rgb(220 38 38 / 0.2); color: #991b1b; }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.0625rem; }
.link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.checkout-submit-area { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.btn-submit { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.875rem 1.5rem; font-size: 0.9375rem; font-weight: 600; color: #ffffff; background: var(--accent-ink); border: none; border-radius: 11px; cursor: pointer; transition: background 160ms, transform 80ms, box-shadow 160ms; box-shadow: 0 2px 8px rgb(23 25 28 / 0.16); letter-spacing: 0.01em; }
.btn-submit:hover:not(:disabled) { background: var(--accent-ink-hover); box-shadow: 0 4px 14px rgb(23 25 28 / 0.2); }
.btn-submit:active:not(:disabled) { transform: translateY(0.5px); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-submit .price { margin-left: auto; font-weight: 700; letter-spacing: -0.02em; }
.btn-submit svg { width: 18px; height: 18px; }
.btn-spinner { display: inline-block; width: 16px; height: 16px; animation: spin 700ms linear infinite; vertical-align: middle; margin-right: 0.375rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.legal-note { text-align: center; font-size: 0.75rem; color: var(--text-3); margin-top: 0.875rem; line-height: 1.5; }
.legal-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.order-summary { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 96px; box-shadow: var(--shadow-sm); }
.summary-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.summary-head h2 { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.summary-count { font-size: 0.75rem; font-weight: 500; color: var(--text-3); padding: 0.1875rem 0.5rem; background: var(--bg-3); border-radius: 999px; }
.summary-items { max-height: 280px; overflow-y: auto; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); }
.summary-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0; }
.summary-item + .summary-item { border-top: 1px solid var(--border); }
.summary-item-img { width: 52px; height: 52px; border-radius: 8px; background: var(--bg-3); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.summary-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.summary-item-info { flex: 1; min-width: 0; }
.summary-item-name { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.summary-item-variant { font-size: 0.6875rem; color: var(--text-3); margin-top: 0.125rem; }
.summary-item-qty { font-size: 0.75rem; color: var(--text-3); margin-top: 0.125rem; }
.summary-item-price { font-size: 0.875rem; font-weight: 600; color: var(--text); white-space: nowrap; flex-shrink: 0; letter-spacing: -0.01em; }
.summary-item-price .old { font-weight: 400; color: var(--text-4); font-size: 0.75rem; text-decoration: line-through; display: block; }
.summary-totals { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.summary-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.875rem; padding: 0.25rem 0; }
.summary-row .label { color: var(--text-3); }
.summary-row .value { font-weight: 500; color: var(--text); }
.summary-row .is-saving { color: var(--ok); font-weight: 600; }
.summary-row.divider { border-top: 1px solid var(--border); margin-top: 0.375rem; padding-top: 0.5rem; }
.summary-row.total .label { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.summary-row.total .value { font-size: 1.125rem; font-weight: 700; color: var(--accent-ink); letter-spacing: -0.02em; }
.summary-notice { padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 0.8125rem; color: var(--ok); background: var(--ok-bg); display: flex; align-items: center; gap: 0.375rem; font-weight: 500; }
.summary-notice svg { width: 14px; height: 14px; flex-shrink: 0; }
.summary-trust { padding: 0.875rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1.25rem; background: var(--bg-2); }
.trust-item { display: flex; align-items: center; gap: 0.3125rem; font-size: 0.6875rem; color: var(--text-4); font-weight: 500; letter-spacing: 0.02em; }
.trust-item svg { width: 13px; height: 13px; }
.totales-loading { display: flex; align-items: center; gap: 0.375rem; }
.totales-shimmer { display: inline-block; width: 64px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-3) 25%, var(--border) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
/* El JS inserta el shimmer ANTES del valor; sin esta regla se verían los dos a
   la vez y el importe viejo parecería el nuevo. */
.totales-loading .totales-shimmer ~ .value { display: none; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cart-empty { text-align: center; padding: 5rem 1.5rem; animation: fadeUp 300ms var(--ease); }
.cart-empty-icon { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--bg-3); color: var(--text-4); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.cart-empty-icon svg { width: 28px; height: 28px; }
.cart-empty-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.cart-empty-desc { font-size: 0.9375rem; color: var(--text-3); max-width: 36ch; margin: 0 auto 1.5rem; line-height: 1.55; }
.checkout-confirm { width: 100%; max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; text-align: left; animation: fadeUp 400ms var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.confirm-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--text); color: #fff; display: grid; place-items: center; flex: none; }
.confirm-icon svg { width: 28px; height: 28px; }
.confirm-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.confirm-status { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-2); font-size: .75rem; }
.confirm-status::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.confirm-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.15; margin-bottom: 1rem; }
.confirm-folio { font-size: 0.875rem; color: var(--text-3); margin-bottom: .35rem; }
.confirm-folio strong { font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 600; font-size: 0.9375rem; }
.confirm-msg { font-size: 0.9375rem; color: var(--text-2); line-height: 1.7; max-width: 62ch; margin: 0 0 2rem; }
.confirm-summary { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-2); margin-bottom: 1.25rem; }
.confirm-summary > div { min-width: 0; }
.confirm-summary span, .confirm-summary small { display: block; color: var(--text-3); font-size: .75rem; }
.confirm-summary strong { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.04em; margin: .35rem 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.confirm-next { border-left: 1px solid var(--border-2); padding-left: 1.5rem; align-self: center; }
.confirm-next h2 { font-size: .875rem; margin-bottom: .5rem; }
.confirm-next p { font-size: .8125rem; line-height: 1.65; color: var(--text-2); }
.checkout-confirm .confirm-actions { justify-content: flex-start; margin-top: 1.75rem; }
.checkout-confirm .confirm-actions > a { min-height: 48px; justify-content: center; }
.confirm-footnote { color: var(--text-3); font-size: .75rem; line-height: 1.65; margin-top: 1.25rem; }
.transfer-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.375rem; text-align: left; margin-bottom: 1.5rem; }
.transfer-box summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-size: .875rem; font-weight: 600; list-style: none; }
.transfer-box summary::-webkit-details-marker { display: none; }
.transfer-box summary span { font-size: 1.25rem; line-height: 1; }
.transfer-box[open] summary { margin-bottom: 1rem; }
.transfer-box[open] summary span { transform: rotate(45deg); }
.transfer-dl { display: grid; gap: 0.5rem; }
.transfer-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.375rem 0; }
.transfer-label { color: var(--text-3); font-size: 0.8125rem; }
.transfer-value { font-weight: 500; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: var(--text); letter-spacing: 0.04em; }
.transfer-nota { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--text-3); line-height: 1.5; }
.confirm-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.btn-confirm-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: var(--text); color: #fff; border-radius: 9px; font-size: 0.875rem; font-weight: 600; transition: background 160ms; text-decoration: none; }
.btn-confirm-primary:hover { background: #1f1f1f; }
.btn-confirm-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: transparent; color: var(--text-2); border-radius: 9px; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--control-border); transition: all 160ms; text-decoration: none; }
.btn-confirm-ghost:hover { background: var(--bg-3); border-color: var(--text-3); }
.checkout-footer { border-top: 1px solid var(--border); padding: 1.25rem 1.5rem; text-align: center; }
.checkout-footer p { font-size: 0.75rem; color: var(--text-4); }
*:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; }
.field-input:focus-visible, .field-select:focus-visible, .field-textarea:focus-visible { outline: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.checkout-main, .cart-empty, .checkout-confirm { animation: fadeIn 280ms var(--ease); }
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
.pd-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.pd-header-inner { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pd-logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.pd-logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 800; letter-spacing: -0.02em; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.pd-logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.pd-logo-name { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pd-logo-back { font-size: 0.8125rem; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color 160ms; }
.pd-logo-back:hover { color: var(--accent); }
.pd-wrap { max-width: 1160px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.pd-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; min-width: 0; }
.pd-overview { padding-bottom: 2rem; max-width: 900px; }
.pd-eyebrow { color: var(--text-3); font-size: .625rem; font-weight: 700; letter-spacing: .12em; line-height: 1.6; }
.pd-overview-heading { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .65rem 0 .85rem; }
.pd-overview h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; letter-spacing: -.045em; font-weight: 700; }
.pd-overview-text { font-size: .9375rem; line-height: 1.7; color: var(--text-2); max-width: 66ch; }
.pd-overview .pd-fecha { margin-top: .85rem; font-size: .75rem; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pd-primary, .pd-secondary { display: grid; align-content: start; gap: 1.25rem; min-width: 0; }
.pd-order-summary { background: var(--bg-2); }
#pdTrackingTitle { scroll-margin-top: 6rem; }
.pd-shipment { padding-top:1.25rem; }
.pd-shipment-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:16px; background:var(--bg-2); margin-bottom:1.5rem; }
.pd-shipment-icon svg { width:36px; height:36px; }
.pd-shipment h3 { font-size:clamp(1.4rem,3vw,1.8rem); line-height:1.2; letter-spacing:-.04em; margin:.5rem 0 1rem; }
.pd-shipment-data { display:grid; gap:1.25rem; margin-block:1.5rem; border-block:1px solid var(--border); padding-block:1.25rem; }
.pd-shipment-data dt { font-size:.7rem; color:var(--text-3); margin-bottom:.4rem; }
.pd-shipment-data dd { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; font-weight:600; font-size:.875rem; overflow-wrap:anywhere; }
#pdGuia { min-width:0; font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.pd-track-link { min-height:48px; width:100%; }
.pd-payment-details>summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:32px; font-size:.875rem; font-weight:600; cursor:pointer; list-style:none; }
.pd-payment-details>summary::-webkit-details-marker { display:none; }
.pd-payment-details[open]>summary span { transform:rotate(180deg); }
.pd-payment-body { padding-top:1.5rem; }
.pd-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.pd-section-heading .pd-section-title { margin: 0; }
.pd-section-heading .pd-eyebrow { margin-bottom: .35rem; }
.pd-section-heading > svg { flex: none; color: var(--text-2); }
.pd-count { font-size: .625rem; color: var(--text-3); white-space: nowrap; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .5rem; }
.pd-section-note { color: var(--text-2); font-size: .875rem; line-height: 1.6; }
.pd-folio-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pd-folio { font-family: 'JetBrains Mono', monospace; font-size: 1.1875rem; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.pd-fecha { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.1875rem; }
.pd-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pd-badge--activo { background: var(--ok-bg); color: var(--ok); }
.pd-badge--espera, .pd-badge--neutral { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--border); }
.pd-badge--cerrado { background: var(--err-bg); color: var(--err); }
.pd-timeline { margin-top: 1.5rem; }
.pd-step { display: flex; gap: 1rem; align-items: flex-start; position: relative; padding-bottom: 1.25rem; }
.pd-step:last-child { padding-bottom: 0; }
.pd-step:not(:last-child)::before { content: ''; position: absolute; left: 0.7rem; top: 1.6rem; bottom: 0; width: 2px; background: var(--border-2); }
.pd-step.is-done:not(:last-child)::before { background: var(--accent); }
.pd-step-dot { width: 1.45rem; height: 1.45rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; background: var(--bg-3); color: var(--text-3); border: 2px solid var(--border-2); z-index: 1; position: relative; }
.pd-step.is-done .pd-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.pd-step.is-active .pd-step-dot { box-shadow: 0 0 0 4px rgb(23 25 28 / 0.12); border-color: var(--accent); }
.pd-step-body { padding-top: 0.05rem; flex: 1; min-width: 0; }
.pd-step-name { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.pd-step.is-done .pd-step-name { color: var(--text); }
.pd-step:not(.is-done) .pd-step-name { color: var(--text-3); }
.pd-step.is-active .pd-step-name { color: var(--accent); }
.pd-step-meta { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.1875rem; line-height: 1.5; }
.pd-step-meta strong { font-weight: 600; }
.pd-section-title { font-size: 0.875rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 1rem; }
.pd-items { display: flex; flex-direction: column; gap: 0; }
.pd-item { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.pd-item:last-child { border-bottom: none; padding-bottom: 0; }
.pd-item:first-child { padding-top: 0; }
.pd-item-img { width: 54px; height: 54px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--border); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pd-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pd-item-info { flex: 1; min-width: 0; }
.pd-item-name { font-size: 0.875rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.pd-item-variant { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.1875rem; line-height: 1.4; }
.pd-item-price { font-size: 0.9rem; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; letter-spacing: -0.01em; }
.pd-totals { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.pd-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.875rem; }
.pd-total-row .lbl { color: var(--text-2); }
.pd-total-row .val { font-weight: 500; color: var(--text); }
.pd-total-grand { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 1.0625rem; }
.pd-total-grand .lbl { font-weight: 700; color: var(--text); }
.pd-total-grand .val { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.pd-total-grand small { font-size: .625rem; font-weight: 400; margin-left: .25rem; color: var(--text-3); }
.pd-address { font-style: normal; font-size: 0.875rem; color: var(--text-2); line-height: 1.8; overflow-wrap: anywhere; }
.pd-contact { display: inline-block; color: var(--text-3); margin-top: .5rem; }
.pd-delivery-method { border-top: 1px solid var(--border); padding-top: .875rem; margin-top: .875rem; color: var(--text-3); font-size: .75rem; }
.pd-notice { text-align: center; font-size: 0.8125rem; color: var(--text-3); margin-top: 1rem; }
.pd-empty { max-width: 680px; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.pd-empty-icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; background: var(--bg-3); border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--text-3); }
.pd-empty-title { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.pd-empty-desc { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.5rem; }
.btn-main { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.5rem; background: var(--accent-ink); color: #fff; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; transition: background 160ms, transform 80ms; text-decoration: none; }
.btn-main:hover { background: var(--accent-ink-hover); }
.btn-main:active { transform: scale(0.98); }
.pd-review-hero { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 1.25rem; margin: 0 0 1.25rem; border-color: var(--border-2); background: var(--bg-2); }
.pd-review-hero-copy { min-width: 0; }
.pd-review-hero .pd-section-title { margin: .45rem 0 .4rem; font-size: 1.12rem; }
.pd-review-rating { display: grid; gap: .25rem; justify-items: center; white-space: nowrap; }
.pd-review-rating span { color: #a77912; font-size: 1.25rem; letter-spacing: .1em; line-height: 1; }
.pd-review-rating small { color: var(--text-3); font-size: .68rem; }
.pd-review-button { white-space: nowrap; min-height: 44px; }
.pd-package-list { display: grid; gap: .65rem; margin-top: 1.25rem; border-top: 1px solid var(--border-2); padding-top: 1rem; }
.pd-package-row { display:grid; gap:1rem; border:1px solid var(--border-2); border-radius:.8rem; padding:1.1rem; min-width:0; }
.pd-package-heading { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:.5rem; padding-bottom:.85rem; border-bottom:1px solid var(--border); }
.pd-package-heading h4 { font-size:.9rem; }
.pd-package-heading h4 span { color:var(--text-3); font-weight:400; font-size:.75rem; }
.pd-package-heading > small { background:var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:.25rem .65rem; color:var(--text-2); font-size:.68rem; }
.pd-package-guide { display:grid; gap:.9rem; }
.pd-package-guide dt { font-size:.68rem; color:var(--text-3); margin-bottom:.3rem; }
.pd-package-guide dd { font-size:.83rem; font-weight:600; overflow-wrap:anywhere; }
.pd-package-items { display:grid; gap:.7rem; list-style:none; margin:0; padding:0; }
.pd-package-items li { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--border); padding-top:.7rem; }
.pd-package-items span { display:grid; gap:.25rem; min-width:0; }
.pd-package-items strong { font-size:.8rem; font-weight:500; overflow-wrap:anywhere; }
.pd-package-items small { color:var(--text-3); font-size:.7rem; }
.pd-package-items b { font-size:.8rem; white-space:nowrap; }
.pd-package-track { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:.6rem .85rem; border:1px solid var(--border-2); border-radius:var(--radius); font-size:.78rem; font-weight:600; background:var(--bg-2); }
.pd-package-track:hover { background:var(--bg-3); }
.pd-pago-aviso { border-radius: 10px; padding: 0.875rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.pd-pago-aviso-titulo { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; }
.pd-pago-aviso-texto { font-size: 0.8125rem; line-height: 1.5; }
.pd-pago-aviso.is-espera { background: var(--bg-3); border-color: var(--border); color: var(--text-2); }
.pd-pago-aviso.is-ok { background: var(--ok-bg); border-color: rgb(22 163 74 / 0.2); color: #14532d; }
.pd-pago-aviso.is-error { background: var(--err-bg); border-color: rgb(220 38 38 / 0.2); color: #7f1d1d; }
.pd-pago-contador { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.pd-pago-contador strong { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; color: var(--accent); }
.pd-pago-contador.is-urgente strong { color: var(--err); }
.pd-pago-vence { font-size: 0.75rem; color: var(--text-3); margin-bottom: 1rem; }
.pd-pago-datos { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0; }
.pd-pago-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.pd-pago-fila dt { font-size: 0.8125rem; color: var(--text-3); flex-shrink: 0; }
.pd-pago-fila dd { display: flex; align-items: center; gap: 0.5rem; margin: 0; min-width: 0; }
.pd-pago-fila.is-destacada dd { font-weight: 700; }
.pd-pago-ref { font-family: 'JetBrains Mono', monospace; font-size: 0.9375rem; letter-spacing: 0.05em; color: var(--text); overflow-wrap: anywhere; }
.pd-copiar { font-size: 0.6875rem; font-weight: 600; color: var(--accent); background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; padding: .55rem .65rem; min-height: 36px; white-space: nowrap; transition: background 160ms; }
.pd-copiar:hover { background: var(--border); }
.pd-copiar.is-copiado { color: var(--ok); background: var(--ok-bg); }
.pd-pago-instrucciones { font-size: 0.8125rem; color: var(--text-2); line-height: 1.55; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
/* Comprobante: selección, progreso y recepción. */
.pd-dz-form { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.pd-dz-label { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--text); margin-bottom: 0.375rem; }
.pd-dz-ayuda { font-size: .8125rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1rem; }

.pd-dz {
  position: relative;
  border: 1px dashed var(--control-border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 180ms, background 180ms, box-shadow 180ms;
}
.pd-dz:hover { border-color: var(--acc); background: var(--bg-3); }
/* El input real queda invisible pero PRESENTE y focuseable: al tabular se llega
   a él y el navegador dibuja su propio anillo, que se traslada a la zona con
   `:focus-within`. Nada de `display: none`, que lo sacaría del orden de foco. */
.pd-dz-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.pd-dz:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.pd-dz[data-estado="arrastrando"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--bg-2)); border-style: solid; }
.pd-dz[data-estado="subiendo"], .pd-dz[data-estado="enviada"] { cursor: default; }
.pd-dz[data-estado="subiendo"] .pd-dz-input { pointer-events: none; }

.pd-dz-vacia { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 1rem; pointer-events: none; }
.pd-dz-icono-marco { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.pd-dz-icono { width: 25px; height: 25px; color: var(--text); }
.pd-dz-titulo { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.pd-dz-sub { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.25rem; line-height: 1.6; }
.pd-dz-elegir { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; margin-top: .875rem; padding: .5rem .75rem; border: 1px solid var(--border-2); border-radius: 8px; background: var(--bg); color: var(--text); font-size: .75rem; font-weight: 600; }
.pd-dz-formatos { font-size: 0.6875rem; color: var(--text-3); margin-top: 0.625rem; }

/* Vista previa: miniatura + datos del archivo. `pointer-events: auto` en el botón
   porque el contenedor los desactiva para que el clic llegue al input. */
.pd-dz-previa { display: flex; gap: 0.875rem; align-items: center; text-align: left; pointer-events: none; }
.pd-dz-thumb {
  width: 88px; height: 112px; flex: none;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.pd-dz-meta { min-width: 0; }
.pd-dz-lista { font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: .375rem; }
.pd-dz-nombre {
  font-size: 0.875rem; font-weight: 600; color: var(--text);
  overflow-wrap: anywhere; line-height: 1.45; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.pd-dz-datos { font-size: 0.75rem; color: var(--text-3); margin-top: 0.125rem; }
.pd-dz-quitar {
  position: relative;
  pointer-events: auto;
  margin-top: 0.25rem;
  min-height: 44px;
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  color: var(--acc); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}

.pd-dz-progreso { pointer-events: none; padding-block: .75rem; }
.pd-dz-barra { height: 6px; margin-top: 1.25rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.pd-dz-barra-fill { height: 100%; width: 0; border-radius: 999px; background: var(--acc); transition: width 160ms ease-out; }
.pd-dz-porcentaje { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.75rem; font-variant-numeric: tabular-nums; }

.pd-dz-error { font-size: 0.8125rem; font-weight: 500; color: var(--err); margin-top: 0.625rem; }
.pd-dz-nota { font-size: 0.75rem; color: var(--text-3); margin-top: 0.5rem; text-align: center; }
.pd-dz-form .btn-main { width: 100%; min-height: 48px; margin-top: 1rem; }
.pd-dz-form .btn-main:disabled { opacity: 0.55; cursor: not-allowed; }
.pd-dz-form .btn-main[aria-busy="true"] { opacity: 1; }
.pd-dz-recibido { border-top: 1px solid var(--border); padding: 1.5rem .25rem .25rem; text-align: center; animation: fadeIn 220ms var(--ease); }
.pd-dz-recibido-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin: 0 auto .875rem; background: var(--text); color: var(--bg); }
.pd-dz-recibido-icono svg { width: 24px; height: 24px; }
.pd-dz-recibido h3 { font-size: 1rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.pd-dz-recibido p { font-size: .8125rem; color: var(--text-2); line-height: 1.6; }
.pd-dz-recibido .pd-dz-actualizando { margin-top: .75rem; color: var(--text-3); }
.pd-dz-recibido .link { font-size: .75rem; min-height: 44px; }
/* El badge del CAPTCHA invisible: Google exige atribución visible. Se coloca
   después de la nota legal como elemento secundario — nunca entre el botón y
   la zona de arrastre, donde corta el flujo de acción. Escala al 85% y con
   opacidad reducida para que sea legible pero no compita con el contenido. */
.pd-dz-captcha {
  margin-top: 0.625rem;
  display: flex;
  justify-content: center;
  opacity: 0.7;
  transform: scale(0.85);
  transform-origin: center top;
}
.pd-dz-captcha > div { margin: 0 !important; }

/* Enlace de WhatsApp en los avisos de pago. */
.pd-pago-aviso-ayuda { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.5rem; }
.pd-wa {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font-weight: 600; color: #1c7c48; text-decoration: none;
}
.pd-wa:hover { text-decoration: underline; text-underline-offset: 2px; }
.pd-wa-icono { width: 16px; height: 16px; flex: none; }
.pd-wa-num { font-weight: 500; color: var(--text-2); }

@media (max-width: 420px) {
  .pd-dz { padding: 1rem; }
  .pd-dz-vacia { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .75rem; }
  .pd-dz-previa { flex-direction: column; align-items: stretch; }
  .pd-dz-thumb { width: 100%; height: 200px; }
  .pd-dz-nombre { font-size: .8125rem; }
}
/* Quien pide menos animación ve los mismos elementos, quietos. `animation: none`
   a secas dejaría la barra de progreso fuera del viewport por su translateX
   inicial, así que se neutraliza también la transformación. */
@media (prefers-reduced-motion: reduce) {
  .totales-shimmer { animation: none; background: var(--bg-3); }
  .option-loading-bar::after { animation: none; width: 100%; transform: none; }
  .btn-spinner { animation: none; }
  .pd-dz-barra-fill { transition: none; }
  .pd-dz { transition: none; }
  .pd-dz-recibido { animation: none; }
  .cart-empty, .checkout-confirm, .checkout-main { animation: none; }
}

/* Ancla del reCAPTCHA invisible en el checkout. `badge: inline` lo pinta aquí en
   vez del recuadro flotante de Google, que en móvil tapa el botón de confirmar. */
/* El badge del CAPTCHA en checkout: discreto, escalado al 85% y con opacidad
   reducida para que no compita visualmente con el botón de confirmar pedido.
   Google exige atribución visible; esto la mantiene legible sin romper el flujo. */
.co-captcha {
  display: flex;
  justify-content: center;
  margin: 0.625rem 0 0;
  opacity: 0.7;
  transform: scale(0.85);
  transform-origin: center top;
}
.co-captcha > div { margin: 0 !important; }

/* El seguimiento comparte esta hoja; el nuevo checkout se limita a .co-page. */
.co-page {
  --bg: #ffffff; --bg-2: #f6f6f6; --bg-3: #eeeeee;
  --border: #e1e1e1; --border-2: #b6b6b6; --control-border: #929292;
  --text: #17191c; --text-2: #505256; --text-3: #64676b; --text-4: #707277;
  --accent: #17191c; --accent-ink: #17191c; --accent-ink-hover: #30343a;
  color: var(--text); background: var(--bg); font-size: 16px;
}
.co-page .co-skip { position: fixed; top: -6rem; left: 1rem; z-index: 100; padding: .8rem 1rem; background: var(--text); color: #fff; border-radius: .5rem; }
.co-page .co-skip:focus { top: 1rem; }
.co-page .checkout-header { background: rgb(255 255 255 / .96); }
.co-page .checkout-header-inner { max-width: 1280px; height: 80px; padding-inline: 2.5rem; }
.co-page .checkout-logo { min-width: 0; }
.co-page .checkout-logo-mark { background: var(--text); border-radius: 50%; width: 42px; height: 42px; object-fit: contain; }
.co-page img.checkout-logo-mark { background: transparent; border-radius: 0; }
.co-page .checkout-logo-name { font-size: 1.125rem; letter-spacing: -.04em; overflow-wrap: anywhere; }
.co-page .checkout-header-badge { font-size: .75rem; color: var(--text-2); }
.co-page .co-back { font-size: .75rem; text-decoration: underline; text-underline-offset: .3em; white-space: nowrap; }
.co-page .co-back span { margin-left: .5rem; }
.co-page .checkout-steps { background: var(--bg); }
.co-page .checkout-steps-inner { max-width: 1280px; padding: 1rem 2.5rem; }
.co-page .steps-bar { max-width: 520px; }
.co-page .step-label { display: inline; font-size: .75rem; }
.co-page .step-num { width: 26px; height: 26px; font-variant-numeric: tabular-nums; }
.co-page .step-item.is-done { color: var(--text-2); }
.co-page .step-item.is-done .step-num { background: var(--text); border-color: var(--text); }
.co-page .checkout-main {
  max-width: 1280px; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  grid-template-areas: "form summary";
  column-gap: clamp(2rem, 6vw, 6rem); row-gap: 2rem; padding: 2rem 2.5rem 5rem;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.co-page .co-eyebrow { font-size: .625rem; font-weight: 700; letter-spacing: .16em; color: var(--text-3); line-height: 1.5; }
.co-page .checkout-form { grid-area: form; min-width: 0; }
.co-page .form-section { margin-bottom: 2.5rem; }
.co-page .section-label { border: 0; margin-bottom: 1rem; padding: 0; color: var(--text); font-size: 1.125rem; letter-spacing: -.035em; text-transform: none; gap: .75rem; }
.co-page .section-label > svg { display: none; }
.co-page .co-section-number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border-2); border-radius: 50%; font-size: .625rem; letter-spacing: 0; color: var(--text-2); }
.co-page .co-section-note { margin: -.35rem 0 1.5rem; color: var(--text-3); font-size: .8125rem; line-height: 1.65; }
.co-page .co-optional { color: var(--text-3); font-weight: 400; }
.co-page .field { margin-bottom: 1.125rem; min-width: 0; }
.co-page .field-label { font-size: .75rem; color: var(--text-2); font-weight: 600; margin-bottom: .5rem; }
.co-page .field-label .req { color: var(--text-3); }
.co-page .field-input, .co-page .field-select, .co-page .field-textarea {
  font-size: 1rem; padding: .875rem 1rem; min-height: 52px;
  border-radius: 8px; background-color: #fff; line-height: 1.45;
}
.co-page .field-select { padding-right: 2.5rem; }
.co-page .field-input:focus, .co-page .field-select:focus, .co-page .field-textarea:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgb(23 25 28 / .14); }
.co-page [aria-invalid="true"] { border-color: var(--err); }
.co-page .field-input::placeholder, .co-page .field-textarea::placeholder { font-size: .875rem; }
.co-page .co-phone { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--control-border); border-radius: 8px; }
.co-page .co-phone-prefix { display: flex; align-items: center; padding-left: 1rem; color: var(--text-2); font-size: .875rem; }
.co-page .co-phone-prefix::after { content: ''; width: 1px; height: 1.25rem; background: var(--border); margin-left: 1rem; }
.co-page .co-phone .field-input { border: 0; min-width: 0; flex: 1; background: transparent; }
.co-page .co-phone:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgb(23 25 28 / .14); }
.co-page .co-phone .field-input:focus { box-shadow: none; }
.co-page .field-error { font-size: .75rem; line-height: 1.5; }
.co-page .option-card { padding: 1.125rem; border-width: 1px; border-radius: 8px; gap: .875rem; }
.co-page .option-card.is-selected, .co-page .option-card:has(input:checked) { border-color: var(--accent-ink); background: #f5f5f5; box-shadow: 0 0 0 1px var(--accent-ink); }
.co-page .option-card:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.co-page .option-radio { width: 20px; height: 20px; margin-top: 0; }
.co-page .option-radio::after { content: none; }
.co-page .option-card-name { font-size: .875rem; }
.co-page .option-card-price { font-family: inherit; font-variant-numeric: tabular-nums; }
.co-page .option-card-desc { margin-top: .375rem; font-size: .75rem; }
.co-page .checkout-submit-area { margin-top: 0; padding-top: 1.5rem; }
.co-page .btn-submit { min-height: 58px; border-radius: 8px; padding: 1rem 1.25rem; background: var(--text); box-shadow: none; font-size: .875rem; }
.co-page .btn-submit:hover:not(:disabled) { background: var(--accent-ink-hover); box-shadow: 0 4px 12px rgb(23 25 28 / .12); }
.co-page .btn-submit[aria-busy="true"] > svg { display:none; }
.btn-submit[aria-busy="true"]::before,.btn-main[aria-busy="true"]::before { content:''; display:inline-block; width:18px; height:18px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin 800ms linear infinite; }
@media(prefers-reduced-motion:reduce) { .btn-submit[aria-busy="true"]::before,.btn-main[aria-busy="true"]::before { animation:none; } }
.co-page .legal-note { font-size: .6875rem; line-height: 1.7; }
.co-page .order-summary { grid-area: summary; min-width: 0; border-radius: 12px; top: 105px; background: var(--bg-2); box-shadow: none; }
.co-page .summary-head { padding: 1.75rem 1.5rem 1rem; background: transparent; border: 0; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.co-page .summary-head h2 { font-size: 1.25rem; text-transform: none; letter-spacing: -.045em; margin-top: .5rem; }
.co-page .summary-count { font-size: .625rem; white-space: nowrap; background: var(--bg); border: 1px solid var(--border); }
.co-page .summary-items { padding: 0 1.5rem 1rem; max-height: 360px; }
.co-page .summary-item { padding: 1rem 0; align-items: center; }
.co-page .summary-item-img { width: 68px; height: 80px; border-radius: 6px; background: #fff; border: 0; }
.co-page .summary-item-name { font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.co-page .summary-item-variant { font-size: .6875rem; margin-top: .375rem; }
.co-page .summary-item-price { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.co-page .summary-totals { padding: 1rem 1.5rem 1.25rem; }
.co-page .summary-row { font-size: .8125rem; padding: .4rem 0; }
.co-page .summary-row.total { padding-top: 1.125rem; margin-top: .875rem; }
.co-page .summary-row.total .label { font-size: 1rem; }
.co-page .summary-row.total small { display: inline-block; color: var(--text-3); font-size: .625rem; font-weight: 500; margin-left: .25rem; }
.co-page .summary-row.total .value { font-size: 1.75rem; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.co-page .summary-footnote { padding: 1rem 1.5rem 0; color: var(--text-3); font-size: .6875rem; line-height: 1.65; }
.co-page .summary-edit { display: block; padding: .875rem 1.5rem 1.25rem; font-size: .75rem; text-decoration: underline; text-underline-offset: .25em; }
.co-page .summary-trust { gap: .75rem; flex-wrap: wrap; padding: 1rem; border-top: 1px solid var(--border); background: transparent; }
.co-page .trust-item { font-size: .625rem; }
.co-page .summary-avisos { padding: .875rem 1.5rem; background: var(--bg-3); color: var(--text-2); border-block: 1px solid var(--border-2); font-size: .75rem; line-height: 1.6; }
.co-page .summary-avisos p + p { margin-top: .5rem; }
.co-page .alert { flex-wrap: wrap; }
.co-page .alert > span { flex: 1; min-width: 180px; }
.co-page .checkout-confirm, .co-page .cart-empty { padding-block: clamp(3rem, 8vw, 6rem); }
.co-page .confirm-title { letter-spacing: -.05em; }
.co-page .transfer-value { overflow-wrap: anywhere; min-width: 0; }
.co-page .checkout-footer { padding: 1.5rem; }
.co-page .co-noscript { margin: 1rem auto; max-width: 40rem; padding: 1rem; color: var(--text-2); text-align: center; }
.co-page .co-noscript a { text-decoration: underline; }
@media (max-width: 760px) {
  .pd-wrap { max-width: 620px; padding: 1.75rem 1rem 2.5rem; }
  .pd-header-inner { min-height: 64px; padding-inline: 1rem; }
  .pd-logo-name { font-size: .9375rem; }
  .pd-logo-back { font-size: .6875rem; }
  .pd-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'summary' 'payment' 'tracking' 'delivery'; gap: 1rem; }
  .pd-primary, .pd-secondary { display: contents; }
  .pd-tracking { grid-area: tracking; }
  .pd-pago { grid-area: payment; }
  .pd-order-summary { grid-area: summary; }
  .pd-delivery { grid-area: delivery; }
  .pd-layout-followup { grid-template-areas: 'tracking' 'payment' 'summary' 'delivery'; }
  .pd-layout-shipping { grid-template-areas: 'tracking' 'summary' 'delivery' 'payment'; }
  .pd-layout:not(:has(.pd-pago)) { grid-template-areas: 'tracking' 'summary' 'delivery'; }
  .pd-card { width: 100%; padding: 1.25rem; }
  .pd-section-heading { gap: .75rem; }
  .pd-pago-fila { align-items: flex-start; flex-wrap: wrap; }
  .pd-pago-fila dd { margin-left: auto; max-width: 100%; overflow-wrap: anywhere; text-align: right; }
  .pd-pago-ref { font-size: .8125rem; letter-spacing: .035em; }
  .pd-overview { padding-bottom: 1.5rem; }
  .pd-overview-text { font-size: .875rem; }
}
@media (max-width: 680px) {
  .pd-review-hero { grid-template-columns: minmax(0,1fr) auto; }
  .pd-review-rating { grid-column: 2; grid-row: 1; }
  .pd-review-button { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 430px) {
  .pd-review-hero { grid-template-columns: 1fr; }
  .pd-review-rating { grid-column: auto; grid-row: auto; justify-items: start; }
  .pd-review-button { grid-column: auto; }
}
@media (max-width: 480px) {
  .confirm-heading { gap: .75rem; }
  .confirm-folio strong { font-size: .8125rem; overflow-wrap: anywhere; }
  .confirm-summary { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
  .confirm-next { border-left: 0; border-top: 1px solid var(--border); padding: 1rem 0 0; }
  .checkout-confirm .confirm-actions { flex-direction: column; }
  .checkout-confirm .confirm-actions a { width: 100%; }
  .pd-item { gap: .625rem; flex-wrap: wrap; }
  .pd-item-price { margin-left: auto; }
  .pd-item-info { min-width: 100px; }
  .pd-pago-fila.is-destacada { flex-direction: column; gap: .4rem; }
  .pd-pago-fila.is-destacada dd { width: 100%; justify-content: space-between; }
  .pd-total-grand .val { font-size: 1.375rem; }
}
@media (max-width: 960px) {
  .co-page .checkout-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "form"; max-width: 680px; padding: 1.5rem 1.5rem 3.5rem; gap: 2rem; }
  .co-page .order-summary { position: static; }
  .co-page .checkout-header-inner, .co-page .checkout-steps-inner { padding-inline: 1.5rem; }
  .co-page .checkout-header-badge { display: none; }
  .co-page .summary-items { max-height: 280px; }
}
@media (max-width: 480px) {
  .co-page .checkout-main { padding: 1.75rem 1rem 2.5rem; gap: 1.75rem; }
  .co-page .checkout-header-inner { height: 68px; padding-inline: 1rem; gap: .75rem; }
  .co-page .checkout-logo-name { font-size: .9375rem; }
  .co-page .checkout-logo-mark { width: 32px; height: 32px; }
  .co-page .co-back { font-size: .625rem; }
  .co-page .co-back span { display: none; }
  .co-page .checkout-steps-inner { padding: .875rem 1rem; }
  .co-page .step-item { gap: .375rem; }
  .co-page .step-label { font-size: .6875rem; }
  .co-page .summary-head { padding: 1.25rem 1rem .75rem; }
  .co-page .summary-items, .co-page .summary-totals { padding-inline: 1rem; }
  .co-page .summary-item-img { width: 54px; height: 64px; }
  .co-page .summary-head h2 { font-size: 1.125rem; }
  .co-page .summary-row.total .value { font-size: 1.5rem; }
  .co-page .summary-item { gap: .625rem; }
  .co-page .field-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .co-page .btn-submit { padding-inline: 1rem; font-size: .8125rem; gap: .375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .co-page *, .co-page *::before, .co-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}