.shop-nav {display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.blokko-brand {color:#513A97; font-size:2rem; font-weight:850; letter-spacing:-.07em;}
.nav-tag {font-size:12px; color:#655e78; background:white; padding:8px 14px; border-radius:30px; border:1px solid #e5e1ef;}
.shop-hero {background:linear-gradient(115deg,#302052,#6445a8); color:white; border-radius:24px; padding:26px 32px; position:relative; overflow:hidden; box-shadow:0 12px 32px #513a971c;}
.shop-hero:after {content:'↗'; position:absolute; right:35px; top:-50px; font-size:220px; opacity:.09;}
.shop-hero .eyebrow {font-size:11px; letter-spacing:.18em; color:#d9cafa; font-weight:700;}
.shop-hero h1 {color:white; font-size:clamp(28px,4vw,42px); padding:12px 0; max-width:650px; letter-spacing:-.04em;}
.shop-hero p {color:#e5ddf3; font-size:15px; margin:0; max-width:620px;}
.shop-steps {display:flex; gap:12px; margin:22px 0 8px; flex-wrap:wrap;}
.shop-step {font-size:13px; color:#746d83; padding:9px 15px; border-radius:30px; background:#eeedf4;}
.shop-step.active {color:#513a97; background:#e8dff8; font-weight:700;}
h2,h3 {letter-spacing:-.025em;}
.product-card {background:linear-gradient(130deg,#eee5fc,#faf8ff); border:1px solid #e4daf4; border-radius:20px; padding:28px; margin:12px 0; position:relative; overflow:hidden; box-shadow:0 8px 24px #513a9709;}
.product-card:after {content:''; position:absolute; width:140px; height:140px; border:24px solid #513a9706; border-radius:50%; right:-45px; bottom:-60px; pointer-events:none;}
.product-icon {display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:#513a97; color:white; font-size:24px; margin-bottom:16px;}
.product-card h3 {margin:0; padding:0; color:#392760; font-size:22px;}
.product-card p {color:#746886; font-size:14px; margin:8px 0 0;}
.order-row {display:flex; justify-content:space-between; gap:18px; color:#746d83; font-size:14px; padding:10px 0;}
.order-total {display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:18px; margin:12px 0 6px; background:#f5f1fc; border-radius:14px; font-weight:700; color:#302052;}
.order-total strong {font-size:30px; letter-spacing:-.04em;}
.order-total small {font-size:12px; font-weight:400;}
.checkout-heading {font-size:21px; font-weight:750; letter-spacing:-.025em; color:#302052; margin-bottom:6px;}
.checkout-help {font-size:14px; line-height:1.6; color:#716780; margin:0 0 18px;}
.step-label {color:#8265b5; font-size:11px; font-weight:750; letter-spacing:.12em; margin-bottom:8px;}
.checkout-note {font-size:13px; color:#716780; line-height:1.7; background:#f0edf7; padding:14px 18px; border-radius:12px; margin-top:12px;}
.receipt-card {background:white; border:1px solid #e5e1ef; border-radius:20px; padding:28px; box-shadow:0 8px 24px #30205208;}
.receipt-card .checkout-heading {margin-bottom:22px;}
.receipt-product {color:#513a97; font-size:18px; font-weight:650; padding-bottom:20px; border-bottom:1px dashed #ddd5e9;}
.receipt-phone {font-size:26px; font-weight:650; letter-spacing:.06em; color:#302052; padding-top:20px; font-variant-numeric:tabular-nums;}
.receipt-label {font-size:12px; color:#7a7089; margin-top:4px;}

.product-image {display:block; width:100%; height:120px; object-fit:contain; margin:0 0 18px; border-radius:12px; background:white; padding:12px;}
* {box-sizing:border-box;} body {margin:0; min-height:100vh; font-family:"Source Sans Pro",Arial,sans-serif; background:radial-gradient(ellipse at top right,#eee8fc 0,transparent 48%),#f8f8fc; color:#252238; font-size:16px;}
main {max-width:1040px; padding:72px 32px 48px; margin:auto;} h1 {margin:0; line-height:1.2;} button,input,select {font:inherit;} button,a.button {cursor:pointer; border:1px solid #ddd9e5; border-radius:8px; padding:10px 16px; background:white; color:inherit; text-decoration:none; display:inline-block; text-align:center;} button:disabled, input:disabled, select:disabled {opacity:.55; cursor:not-allowed;} button.primary,a.primary {background:linear-gradient(110deg,#513a97,#684bb0); border-color:#513a97; color:white; border-radius:12px; min-height:50px; width:100%; box-shadow:0 5px 12px #513a971a;} button.primary:hover,a.primary:hover {background:#402b7c;}
.tabs {display:flex; gap:24px; border-bottom:1px solid #e5e1ef; margin:12px 0 22px;} .tabs button {border:0; border-bottom:3px solid transparent; background:transparent; border-radius:0; padding:12px 0;} .tabs button[aria-selected="true"] {color:#513a97; border-bottom-color:#513a97; font-weight:700;}
.columns {display:grid; grid-template-columns:1fr 1.35fr; gap:32px;} .columns.payment {grid-template-columns:1.35fr 1fr;} form {background:white; border:1px solid #e5e1ef; border-radius:20px; padding:24px; box-shadow:0 8px 30px #30205208;} label {display:block; font-size:14px; margin:14px 0 7px;} input,select {width:100%; min-height:48px; border:1px solid #e1ddeb; border-radius:12px; background:#fcfbfe; padding:10px 12px; color:#252238;} input {font-size:17px; letter-spacing:.04em;} :focus-visible {outline:2px solid #8060bb; outline-offset:3px;} input:focus {border-color:#8060bb; box-shadow:0 0 0 3px #8060bb18;}
.payment-box {border:1px solid #e5e1ef; border-radius:12px; padding:16px;} .metric {font-size:36px; margin:4px 0 18px;} details {border:1px solid #e5e1ef; border-radius:12px; background:#ffffff80; padding:14px; margin:16px 0;} summary {cursor:pointer;} .caption {color:#746d83; font-size:14px;} .alert {border-radius:8px; padding:16px; margin:16px 0; line-height:1.6;} .info {background:#e8f1fc; color:#24547d;} .error {background:#fce9ec; color:#922b3b;} .warning {background:#fff4d5; color:#775514;} .success {background:#e6f5eb; color:#246540;} hr {border:0; border-top:1px solid #e5e1ef; margin:28px 0;} code {display:block; background:#f0edf7; padding:16px; overflow-wrap:anywhere;} .check {display:flex; align-items:center; gap:10px;} .check input {width:18px; min-height:18px;} #toast {position:fixed; right:24px; bottom:24px; background:white; box-shadow:0 4px 30px #30205230; border-radius:12px; padding:18px; max-width:90vw;} [hidden] {display:none!important;}
@media(max-width:640px) {main {padding:59px 20px 32px;} .columns,.columns.payment {grid-template-columns:1fr; gap:24px;} form {padding:20px;} .nav-tag {font-size:10px;} }

/* Identidad Blokko: violeta, magenta y rojo del logo original. */
:root {--purple:#5836ca; --magenta:#c522ac; --red:#ff3445;}
body {background:radial-gradient(ellipse at top left,#eee8ff 0,transparent 48%),#f8f8fc;}
main {max-width:1160px; padding-top:32px;}
.nav-title {color:#615878; font-size:14px; font-weight:600;}
.shop-hero {display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(108deg,#513997 0%,#8070b1 40%,#eae9ed 78%); padding:30px 36px; min-height:200px;}
.shop-hero:after {display:none;}
.shop-hero h1 {font-size:clamp(28px,3.4vw,40px); line-height:1.14; margin:0;}
.shop-hero .eyebrow {color:#eee7ff; font-size:10px;}
.shop-hero p {font-size:14px;}
.brand-logo {width:340px; max-width:42%; height:auto; mix-blend-mode:multiply;}
.tabs {margin-top:18px;}
.tabs button[aria-selected="true"] {border-image:linear-gradient(90deg,var(--purple),var(--magenta)) 1; color:var(--purple);}
.columns {grid-template-columns:1fr 1.2fr; gap:28px;}
.columns>section,.columns>form {min-width:0;}
button.primary,a.primary {background:linear-gradient(110deg,var(--purple),#8c2fc2,var(--magenta)); border:0;}
button.primary:hover,a.primary:hover {background:linear-gradient(110deg,#4526af,#a41b95);}
.secondary {width:100%; margin-top:18px; border-color:#b6a0e4; color:var(--purple);}
.category-badge {display:inline-block; border-radius:20px; padding:5px 10px; background:#eee6ff; color:var(--purple); font-size:11px; font-weight:700; margin-bottom:16px;}
.product-card {background:linear-gradient(140deg,#fff,#f2eaff);}
.product-image {height:130px; mix-blend-mode:multiply; background:transparent;}
.payment-box {padding:28px; background:white; border-radius:20px;}
.metric small {font-size:16px; color:#756a83;}
.receipt-reference {font-size:22px; font-weight:650; letter-spacing:.03em; color:#302052; padding:8px 0 14px; overflow-wrap:anywhere;}
.receipt-label {margin-top:16px;}
.receipt-card .order-row {margin-top:10px;}
.status-card {display:flex; align-items:center; gap:20px; padding:28px;}
.status-card h2 {font-size:26px; margin:4px 0 8px;}
.status-card p {font-size:14px; margin:0; line-height:1.6;}
.status-symbol {display:flex; flex:none; align-items:center; justify-content:center; width:66px; height:66px; font-size:36px; border-radius:50%; background:#d9f1e4; color:#187348;}
.pending {border:1px solid #e4dcf4; background:#f3effc; border-radius:20px; margin-top:26px; color:#594978;}
.pending .status-symbol {background:#e4d9f5; color:var(--purple);}
.service-receipt {background:white; border:1px solid #d8e9df; border-radius:22px; overflow:hidden; margin-top:28px; box-shadow:0 12px 35px #3020520a;}
.completed>.status-card {background:linear-gradient(100deg,#e8f8ef,#f7fcfa); color:#195b3c; border-bottom:1px solid #d8e9df;}
.rejected>.status-card {background:#fff0f2; color:#9d2544;}
.rejected .status-symbol {background:#ffdce4; color:#9d2544;}
.result-code {margin-left:auto; border:1px solid currentColor; border-radius:20px; font-size:12px; padding:6px 12px;}
.receipt-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:28px;}
.receipt-grid span {display:block; font-size:12px; color:#82778e; margin-bottom:8px;}
.receipt-grid strong {display:block; font-size:15px; color:#302052; overflow-wrap:anywhere; font-weight:600;}
.legal {margin:0 28px 24px; font-size:13px;}
.legal p {line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere;}
.receipt-actions {display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 28px; background:#faf8fd; border-top:1px solid #eee8f5;}
@media(max-width:640px) {
  main {padding:24px 16px;}
  .shop-hero {flex-direction:column-reverse; align-items:flex-start; background:linear-gradient(120deg,#513997,#9a87b9); padding:22px; gap:12px;}
  .brand-logo {max-width:100%; width:220px; align-self:flex-end; mix-blend-mode:normal; border-radius:10px;}
  .shop-hero h1 {font-size:30px;}
  .columns,.columns.payment {grid-template-columns:1fr;}
  .receipt-grid {grid-template-columns:repeat(2,minmax(0,1fr)); padding:20px; gap:20px;}
  .status-card {padding:20px; gap:12px; align-items:flex-start;}
  .status-card h2 {font-size:22px;}
  .status-symbol {width:44px; height:44px; font-size:26px;}
  .result-code {display:none;}
  .receipt-actions {flex-direction:column; align-items:stretch; padding:20px;}
  .legal {margin:0 20px 20px;}
  .nav-title {font-size:12px;}
}
@media print {
  body {background:white;} main {max-width:none; padding:0;}
  .shop-nav,.tabs,#message,#order-details,#toast,.columns,.pending,.receipt-actions button {display:none!important;}
  .shop-hero {background:white; color:#302052; min-height:0; padding:0 0 20px;}
  .shop-hero h1 {color:#302052; font-size:24px;} .shop-hero p,.shop-hero .eyebrow {display:none;}
  .service-receipt {box-shadow:none; margin:0; break-inside:avoid;}
  .legal {display:block;} .legal::details-content {content-visibility:visible;}
}