.checkout-page { background: #f7f9f9; color: #0a1128; }
.whatsapp-float { position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom)); right: calc(1.5rem + env(safe-area-inset-right)); z-index: 10; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: .875rem; background: linear-gradient(145deg, #5cf77a 0%, #19c52c 100%); color: #fff; box-shadow: 0 .25rem .875rem #07182c24; transition: filter .18s, transform .18s; }
.whatsapp-float:hover { transform: translateY(-2px); }
.whatsapp-float svg { display: block; width: 2.5rem; height: 2.5rem; }
.checkout-header { width: 100%; min-height: 84px; margin: auto; padding: 0 max(24px, calc((100% - 1160px) / 2)); display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; background: #fff; }
.checkout-header .brand img { display: block; width: 146px; }
.checkout-contact-button, .submit-button { border: 1px solid #1284a46c; border-radius: 12px; background: linear-gradient(180deg, #32b8d6 0%, #22afd0 31%, #20a9ca 100%); box-shadow: inset 0 0 4px 1px #ffffffab; color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .18s; }
.checkout-contact-button { display: inline-flex; min-height: 44px; padding: 9px 18px; align-items: center; justify-content: center; gap: 14px; font-size: 14px; }
.checkout-contact-button::after, .submit-button::after { width: 20px; height: 20px; flex: none; background: currentColor; content: ''; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.checkout-contact-button:hover, .submit-button:hover:not(:disabled) { transform: translateY(-2px); }
.checkout-contact-button:active, .submit-button:active:not(:disabled) { box-shadow: inset 0 0 6px 2px #ffffff99, 0 1px 3px 0 #0a112810; }
.checkout-contact-button:focus-visible, .submit-button:focus-visible { outline: 2px solid #0a1128; outline-offset: 3px; }
.help-link { color: #0a1128; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.checkout-shell { width: min(1200px, calc(100% - 48px)); margin: 36px auto 80px; }
.checkout-heading { display: block; width: 100%; margin-bottom: 30px; text-align: center !important; }
.back-link { display: inline-block; margin-bottom: 26px; color: #637981; font-size: 13px; text-decoration: none; }
.eyebrow, .block-label { margin: 0 0 8px; color: #0a1128; font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.checkout-heading h1 { display: block; width: 100%; max-width: none; margin: 0; color: #0a1128; font-size: clamp(38px, 5vw, 58px); line-height: 1; letter-spacing: -.055em; text-align: center !important; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 550px; gap: 30px; align-items: start; }
.form-block, .plan-block { border-radius: 20px; }
.form-block { padding: 0; background: transparent; }
.form-block > h2 { margin: 0 0 24px; color: #0a1128; font-size: 25px; letter-spacing: -.035em; }
.form-section { min-inline-size: 0; margin: 0; padding: 35px 35px; border: 0; border-radius: 16px; background: #fff; }
.form-section + .form-section { margin-top: 30px; }
.section-title { margin: 0 0 22px; color: #0a1128; font-size: 1.5rem; font-weight: 700; }
.request-options, .payment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.request-option, .payment-option { display: flex; min-height: 72px; padding: 13px; gap: 10px; align-items: center; border: 1px solid #c7d5da; border-radius: 12px; background: #fff; color: #0a1128; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.request-option:hover, .payment-option:hover { transform: translateY(-1px); }
.request-option:has(input:checked), .payment-option:has(input:checked) { border-color: #0a1128; background: #fff; color: #0a1128; box-shadow: none; }
.request-option input, .payment-option input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: #0a1128; }
.request-option span:last-child, .payment-option span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.request-option strong, .payment-option strong { font-size: 14px; line-height: 1.1; }
.request-option small, .payment-option small { color: #496772; font-size: 11px; line-height: 1.2; }
.select-row, .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; margin-top: 20px; flex-direction: column; gap: 5px; color: #0a1128; font-size: 1rem; font-weight: 600; }
.field-grid .field, .select-row .field { margin-top: 20px; }
.field input, .field select { width: 100%; padding: 15px; border: 1px solid #c7d5dabe; border-radius: 12px; outline: none; background: #fff; color: #0a1128; font-size: 0.9rem; font-weight: 500; }
.field input[list="device-options"] { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237c929a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237c929a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; }
.field input::placeholder { color: #7c929a; font-weight: 400; }
.field input:focus, .field select:focus { border-color: #0a1128; box-shadow: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { box-shadow: 0 0 0 2px #ffcccc; }
.field small { color: #496772; font-size: 13px; font-weight: 500; line-height: 1.3; }
.field-error { min-height: 0; color: #9b2525 !important; }
.new-client-fields { margin-top: 2px; }
.payment-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
.payment-option { position: relative; min-height: 70px; padding: 20px 25px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; border-color: #c7d5dabe; border-radius: 10px; box-shadow: none; }
.payment-option:hover { transform: translateY(-1px); }
.payment-option:active { transform: translateY(1px); }
.payment-option:has(input:checked), .payment-option.is-selected { border-color: #0a1128; box-shadow: none; }
.payment-option:has(input:focus-visible) { outline: 2px solid #0a1128; outline-offset: 2px; }
.payment-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.payment-option .payment-option-copy { display: block; }
.payment-option .payment-option-copy strong { display: block; font-size: 1rem; line-height: 1.1; }
.card-payment-notice { margin-top: 14px; padding: 12px 14px; border: 1px solid #efb8b8; border-radius: 10px; background: #fff2f2; color: #8e2424; font-size: 13px; line-height: 1.45; }
.card-payment-notice[hidden], .card-payment-agreement[hidden] { display: none; }
.plan-assurances[hidden], .custom-quote-note[hidden], .price-breakdown[hidden], .promo-section[hidden] { display: none; }
.card-payment-agreement { display: flex; margin-top: 10px; gap: 9px; align-items: flex-start; color: #315b66; font-size: 13px; font-weight: 550; line-height: 1.4; cursor: pointer; }
.card-payment-agreement input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: #b42318; }
.card-payment-agreement input[aria-invalid="true"] { outline: 2px solid #e2a1a1; outline-offset: 2px; }
.card-payment-error { display: block; min-height: 0; margin-top: 5px; color: #9b2525; font-size: 12px; }
.payment-icon { display: block; width: auto; height: 25px; flex: none; border-radius: 0; background: transparent; font-size: 20px; font-weight: 850; line-height: 17px; }
.crypto-icon { color: inherit; }
.card-icon { position: relative; width: 17px; height: 12px; margin-bottom: 8px; border: 1.5px solid currentColor; border-radius: 2px; color: inherit; }
.card-icon::before { position: absolute; top: 3px; right: 0; left: 0; border-top: 1.5px solid currentColor; content: ''; }
.card-icon::after { position: absolute; bottom: 2px; left: 2px; width: 4px; height: 1.5px; border-radius: 1px; background: currentColor; content: ''; }
.consent { display: flex; margin: 22px 0 16px; gap: 8px; align-items: flex-start; color: #315b66; font-size: 12px; line-height: 1.35; cursor: pointer; }
.consent input { width: 15px; height: 15px; margin: 1px 0 0; flex: none; accent-color: #0a1128; }
.submit-button { display: flex; width: 100%; min-height: 54px; margin-top: 24px; padding: 12px 20px; gap: 14px; align-items: center; justify-content: center; font-size: 16px; }
.submit-button:disabled { cursor: wait; opacity: .75; }
.submit-button:disabled::after { display: none; }
.submit-button span { color: #7bd6e8; font-size: 18px; }
.checkout-error-dialog { width: min(440px, calc(100% - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 18px; background: #fff; color: #0a1128; box-shadow: 0 20px 60px #0023332b; }
.checkout-error-dialog::backdrop { background: #0a112899; }
.checkout-error-content { position: relative; padding: 34px; }
.checkout-error-content h2 { margin: 0 38px 14px 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.025em; }
.checkout-error-content p { margin: 0 0 28px; color: #496772; font-size: 1rem; line-height: 1.5; white-space: pre-line; }
.checkout-error-close { position: absolute; top: 22px; right: 22px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: #f1f5f6; color: #0a1128; font-size: 24px; line-height: 1; cursor: pointer; }
.checkout-error-actions { display: grid; gap: 10px; }
.checkout-error-support { margin-top: 0 !important; }
.checkout-error-support strong { color: #0a1128; font-weight: 700; }
.checkout-error-whatsapp { display: flex; width: 100%; min-height: 50px; padding: 12px 18px; box-sizing: border-box; align-items: center; justify-content: center; gap: 8px; border: 1px solid #18a92a; border-radius: 12px; background: linear-gradient(145deg, #35d65a 0%, #20bf38 100%); box-shadow: inset 0 0 4px 1px #ffffff80; color: #fff; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; transition: transform .18s; }
.checkout-error-whatsapp svg { width: 20px; height: 20px; flex: none; }
.checkout-error-whatsapp[hidden] { display: none; }
.checkout-error-whatsapp:hover { transform: translateY(-2px); }
.checkout-error-action { display: flex; width: 100%; min-height: 50px; padding: 12px 18px; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid #e3e6e9d7; border-radius: 12px; background: #fff; box-shadow: inset 0 -4px 6px -2px #bcc6d066, 0 2px 8px #0a112808; color: #0a1128; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .18s; }
.checkout-error-action::before { width: 20px; height: 20px; flex: none; background: currentColor; content: ''; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.checkout-error-action:hover { transform: translateY(-2px); }
.checkout-error-action:active { box-shadow: inset 0 -4px 6px -2px #bcc6d066, 0 1px 3px #0a11280d; }
.checkout-error-close:focus-visible, .checkout-error-action:focus-visible, .checkout-error-whatsapp:focus-visible { outline: 2px solid #0a1128; outline-offset: 3px; }
.checkout-contact-dialog { width:min(42rem,calc(100% - 2rem)); max-width:none; max-height:calc(100svh - 2rem); margin:auto; padding:0; border:0; border-radius:16px; background:#fff; color:#0a1128; box-shadow:0 20px 60px #0023332b; }
.checkout-contact-dialog::backdrop { background:#0a112899; backdrop-filter:blur(5px); }
.checkout-contact-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:32px 32px 0; }
.checkout-contact-head h2 { margin:0; font-size:24px; line-height:1.15; letter-spacing:-.025em; }
.checkout-contact-head p { margin:10px 0 0; color:#496772; font-size:16px; line-height:1.5; }
.checkout-contact-close { display:grid; width:44px; height:44px; flex:none; place-items:center; border:0; border-radius:50%; background:#f1f5f6; color:#0a1128; font-size:27px; line-height:1; cursor:pointer; }
.checkout-contact-form { padding:24px 32px 32px; }
.checkout-contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.checkout-contact-field { display:flex; margin:0 0 20px; flex-direction:column; gap:5px; color:#0a1128; font-size:16px; font-weight:600; }
.checkout-contact-field input,.checkout-contact-field select,.checkout-contact-field textarea { width:100%; min-height:53px; padding:15px; border:1px solid #c7d5dabe; border-radius:12px; outline:none; background:#fff; color:#0a1128; font-size:14px; font-weight:500; }
.checkout-contact-field select { appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237c929a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px; }
.checkout-contact-field select:invalid { color:#7c929a; }
.checkout-contact-field textarea { min-height:144px; resize:vertical; }
.checkout-contact-field input::placeholder,.checkout-contact-field textarea::placeholder { color:#7c929a; font-weight:400; }
.checkout-contact-field input:focus,.checkout-contact-field select:focus,.checkout-contact-field textarea:focus { border-color:#0a1128; box-shadow:none; }
.checkout-contact-submit,.checkout-contact-whatsapp { display:flex; width:100%; min-height:54px; padding:12px 20px; align-items:center; justify-content:center; gap:10px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; transition:transform .18s; }
.checkout-contact-submit { border:1px solid #1284a46c; background:linear-gradient(180deg,#32b8d6 0%,#22afd0 31%,#20a9ca 100%); box-shadow:inset 0 0 4px 1px #ffffffab; color:#fff; }
.checkout-contact-whatsapp { margin-top:12px; border:1.5px solid #e3e6e9d7; background:#fff; box-shadow:inset 0 -4px 6px -2px #bcc6d066,0 2px 8px #0a112808; color:#0a1128; }
.checkout-contact-whatsapp svg { width:22px; height:22px; flex:none; }
.checkout-contact-submit:hover,.checkout-contact-whatsapp:hover { transform:translateY(-2px); }
.checkout-contact-submit:disabled { cursor:wait; opacity:.7; }
.checkout-contact-error,.checkout-contact-sent { display:none; margin:0 0 16px; padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.45; }
.checkout-contact-error.show { display:block; background:#fff0f0; color:#9d1530; }
.checkout-contact-sent:not([hidden]) { display:block; background:#e8f8ee; color:#0b6532; }
.checkout-contact-close:focus-visible,.checkout-contact-submit:focus-visible,.checkout-contact-whatsapp:focus-visible { outline:2px solid #0a1128; outline-offset:3px; }
.whatsapp-float:focus-visible { outline: 2px solid #0a1128; outline-offset: 3px; }
.plan-block { position: sticky; top: 22px; min-width: 0; padding: 32px 36px 28px; border-radius: 16px; background: #fff; color: #0a1128; font-variant-numeric: tabular-nums; }
.plan-amount { padding: 32px 0 40px; border-bottom: 1px solid #e1e8eb; text-align: center; }
.plan-amount p { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.plan-amount > strong { display: block; color: #23aed1; font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.plan-block.is-custom-quote .plan-amount > strong { font-size: 36px; }
.plan-assurances { display: flex; margin-top: 16px; align-items: center; justify-content: center; gap: 6px; color: #496772; font-size: 14px; line-height: 1.4; }
.plan-assurances svg { width: 16px; height: 16px; flex: none; color: #007f9e; }
.plan-block .order-summary-title { margin: 32px 0 24px; font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
.plan-product { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: 16px; }
.plan-product p { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
.plan-product .plan-product-type { margin-top: 6px; color: #496772; font-size: 14px; font-weight: 400; }
.plan-product > strong { font-size: 16px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.custom-quote-note { margin: 24px 0 0; color: #496772; font-size: 16px; line-height: 1.5; }
.price-breakdown { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid #e1e8eb; }
.price-breakdown > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; }
.price-breakdown > div[hidden] { display: none; }
.price-breakdown dt { min-width: 0; color: #496772; font-size: 16px; line-height: 1.5; }
.price-breakdown dd { margin: 0; color: #0a1128; font-size: 16px; line-height: 1.5; font-weight: 550; white-space: nowrap; }
.price-breakdown .discount-row dt, .price-breakdown .discount-row dd { color: #23aed1; }
.price-breakdown .promo-discount-row dt, .price-breakdown .promo-discount-row dd { color: #23aed1; }
.promo-discount-row dt span { font-size: 13px; }
#summary-discount-percent { display: inline-block; margin-left: 4px; font-size: 13px; font-weight: 500; }
.price-breakdown .final-price { margin-top: 16px; padding: 20px 0 0; border-top: 1px solid #e1e8eb; }
.price-breakdown .final-price dt { color: #0a1128; font-size: 20px; font-weight: 650; }
.price-breakdown .final-price dd { color: #23aed1; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.price-breakdown .referral-reward-note { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #b9e5ee; border-radius: 10px; background: #eefbfc; color: #007f9e; font-size: 13px; line-height: 1.45; }
.price-breakdown .referral-reward-note[hidden] { display: none; }
.referral-reward-note strong { color: #0a1128; font-weight: 700; }
.promo-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e1e8eb; }
.promo-section label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.promo-controls { display: flex; gap: 10px; }
.promo-controls input { min-width: 0; min-height: 48px; flex: 1; padding: 11px 14px; border: 1px solid #cfdbdf; border-radius: 10px; background: #fff; color: #0a1128; font-size: 15px; font-weight: 500; }
.promo-controls input::placeholder { color: #8297a0; font-weight: 500; }
.promo-controls input:focus-visible { outline: 2px solid #23aed1; outline-offset: 2px; }
.promo-controls input[aria-invalid="true"] { border-color: #b73434; }
.promo-controls input[readonly] { background: #f7f9f9; }
.promo-controls button { min-height: 48px; padding: 10px 18px; border: 1.5px solid #e3e6e9d7; border-radius: 10px; background: #fff; box-shadow: inset 0 -4px 6px -2px #bcc6d066, 0 2px 8px #0a112808; color: #0a1128; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .18s; }
.promo-controls button:hover { transform: translateY(-2px); }
.promo-controls button:focus-visible { outline: 2px solid #0a1128; outline-offset: 3px; }
#promo-feedback { min-height: 20px; margin: 9px 0 0; color: #496772; font-size: 13px; line-height: 1.4; }
#promo-feedback[data-state="success"] { color: #087a55; }
#promo-feedback[data-state="error"] { color: #b73434; }

.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } .plan-block { position: static; grid-row: 1; } }
@media (max-width: 64rem) { .whatsapp-float { right: calc(1rem + env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); } }
@media (max-width: 680px) { .checkout-header { width: 100%; padding-inline: 14px; } .checkout-shell { width: min(100% - 28px, 1160px); } .checkout-header { min-height: 70px; } .checkout-header .brand img { width: 126px; } .checkout-shell { margin-top: 22px; } .checkout-heading h1 { font-size: 43px; } .form-block { padding: 0; } .form-section { padding: 24px 20px; } .plan-block { padding: 24px 20px; border-radius: 15px; } .request-options, .payment-options, .field-grid, .select-row,.checkout-contact-grid { grid-template-columns: 1fr; } .request-option, .payment-option { min-height: 60px; } .checkout-contact-head { padding:24px 20px 0; } .checkout-contact-form { padding:20px; } }