:root { color-scheme: light; --navy:#052758; --blue:#075ed4; --cyan:#079cdb; --green:#25a53e; --green-dark:#13862d; --muted:#5a6d87; --line:#dce8f2; --surface:#f4f9fc; font-family:Arial,Helvetica,sans-serif; color:var(--navy); background:var(--surface); }
* { box-sizing:border-box; }
html,body { width:100%; max-width:100%; min-width:0; margin:0; overflow-x:hidden; }
body { min-height:100vh; background:linear-gradient(180deg,#fff 0,var(--surface) 18rem); touch-action:pan-y; }
button,input,select { font:inherit; }
.order-page { position:relative; width:100%; max-width:100%; min-height:100vh; overflow-x:hidden; }
.order-page::before { position:absolute; z-index:-1; top:-13rem; right:-8rem; width:36rem; height:28rem; border-radius:46%; background:#e7f5fb; content:""; transform:rotate(-12deg); }
.page-container { width:calc(100% - 2.5rem); max-width:1120px; min-width:0; margin-inline:auto; }
.order-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:112px; padding-block:.8rem; }
.order-brand { display:block; width:170px; height:84px; }
.order-brand img { display:block; width:100%; height:100%; object-fit:contain; }
.header-copy { display:flex; flex-direction:column; align-items:flex-end; }
.header-copy span { color:var(--green-dark); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.header-copy strong { margin-top:.25rem; font-size:1rem; text-transform:uppercase; }
.order-main { padding-bottom:3.5rem; }
.intro { max-width:720px; padding-block:2rem 2.5rem; }
.eyebrow { margin:0 0 .6rem; color:var(--green-dark); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.intro h1 { margin:0; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:-.045em; line-height:1; text-transform:uppercase; }
.intro>p:last-child { margin:1rem 0 0; color:var(--muted); line-height:1.5; }
.order-form { display:grid; gap:1.25rem; }
.form-section { padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--line); border-radius:20px; background:rgb(255 255 255 / 96%); box-shadow:0 13px 32px rgb(5 39 88 / 7%); }
.section-heading { display:flex; gap:1rem; align-items:center; margin-bottom:1.6rem; }
.section-number { color:#d7e9f1; font-size:2.5rem; font-weight:700; letter-spacing:-.07em; }
.section-heading p { margin:0 0 .2rem; color:var(--green-dark); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.section-heading h2 { margin:0; font-size:1.25rem; text-transform:uppercase; }
.field-grid { display:grid; gap:1rem; }
.field-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.field { min-width:0; }
.field label { display:block; margin-bottom:.45rem; font-size:.82rem; font-weight:700; }
.field label span { color:#d63e3e; }
.field .water-amount-label { margin-bottom:.55rem; font-size:1.05rem; letter-spacing:.01em; }
.field input,.field select { width:100%; min-height:48px; padding:.75rem .85rem; border:1px solid #cddce7; border-radius:9px; outline:0; color:var(--navy); background:#fff; transition:border-color .16s ease,box-shadow .16s ease; }
.master-picker { position:relative; }
.master-picker input { padding-right:3rem; }
.master-picker button:not(.master-picker__option) { position:absolute; top:0; right:0; width:2.85rem; height:48px; border:0; border-radius:0 9px 9px 0; color:var(--blue); background:transparent; font-size:1.25rem; cursor:pointer; }
.master-picker button:disabled { color:#92a2b4; cursor:not-allowed; }
.master-picker__menu { position:absolute; z-index:20; top:calc(100% + .3rem); right:0; left:0; max-height:250px; overflow:auto; padding:.35rem; border:1px solid #b9d3e4; border-radius:10px; background:#fff; box-shadow:0 14px 28px rgb(5 39 88 / 16%); }
.master-picker__option { display:block; width:100%; min-height:38px; padding:.55rem .7rem; border:0; border-radius:7px; color:var(--navy); background:#fff; font-size:.82rem; font-weight:600; text-align:left; cursor:pointer; }
.master-picker__option:hover,.master-picker__option:focus { color:#fff; background:var(--blue); outline:0; }
.master-picker__empty { display:block; padding:.7rem; color:var(--muted); font-size:.76rem; text-align:center; }
.field input:focus,.field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgb(7 94 212 / 12%); }
.field input[aria-invalid="true"],.field select[aria-invalid="true"] { border-color:#d63e3e; box-shadow:0 0 0 3px rgb(214 62 62 / 10%); }
.field select:disabled { color:#8292a5; background:#f1f5f7; cursor:not-allowed; }
.field small { display:block; margin-top:.35rem; color:var(--muted); font-size:.7rem; }
.field-error { display:block; min-height:1rem; margin-top:.3rem; color:#b52222; font-size:.7rem; }
.location-flow { display:flex; gap:.7rem; align-items:center; margin:-.4rem 0 1.2rem; color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.location-flow i { color:var(--green); font-style:normal; }
.location-notice { margin:.8rem 0 0; padding:.75rem .9rem; border-left:3px solid var(--green); border-radius:0 7px 7px 0; color:#466079; background:#f0f9f2; font-size:.78rem; line-height:1.45; }
.location-notice:empty { display:none; }
.water-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.55fr); gap:1rem; align-items:stretch; }
.total-card { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; min-height:92px; padding:1rem 1.2rem; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 10px 22px rgb(7 94 212 / 18%); }
.total-card span { font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.total-card strong { margin-block:.15rem; font-size:2rem; }
.total-card small { font-size:.65rem; opacity:.85; }
.form-status { display:none; padding:.85rem 1rem; border-radius:9px; font-size:.82rem; font-weight:600; }
.form-status.is-error,.form-status.is-success { display:block; }
.form-status.is-error { color:#8e2020; border:1px solid #efcaca; background:#fff1f1; }
.form-status.is-success { color:#17662a; border:1px solid #bfe4c8; background:#effaf1; }
.form-actions { display:flex; gap:1rem; justify-content:flex-end; padding-top:.5rem; }
.action-button { display:inline-flex; gap:.65rem; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.25rem; border:0; border-radius:9px; font-size:.76rem; font-weight:700; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; cursor:pointer; }
.action-button--back { color:var(--navy); border:1px solid #cbdbe6; background:#fff; }
.action-button--continue { color:#fff; background:linear-gradient(90deg,var(--green-dark),#58c344); box-shadow:0 9px 20px rgb(37 165 62 / 20%); }
.action-button:focus-visible { outline:3px solid rgb(7 94 212 / 22%); outline-offset:3px; }
.transfer-modal { width:min(calc(100% - 2rem),620px); max-height:calc(100dvh - 2rem); padding:0; overflow:auto; border:0; border-radius:20px; color:var(--navy); background:#fff; box-shadow:0 28px 80px rgb(5 39 88 / 30%); }
.transfer-modal::backdrop { background:rgb(3 28 60 / 64%); backdrop-filter:blur(3px); }
.modal-accent { height:7px; background:linear-gradient(90deg,var(--blue),var(--cyan) 52%,var(--green)); }
.modal-content { padding:clamp(1.25rem,4vw,2rem); }
.modal-eyebrow { margin:0 0 .45rem; color:var(--green-dark); font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.modal-content h2 { margin:0; font-size:clamp(1.5rem,5vw,2.2rem); letter-spacing:-.035em; text-transform:uppercase; }
.modal-intro { margin:1rem 0 1.2rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.transfer-total { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:120px; padding:1rem; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 12px 25px rgb(7 94 212 / 20%); }
.transfer-total span { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.transfer-total strong { margin-top:.15rem; font-size:clamp(2.5rem,10vw,3.8rem); line-height:1; }
.bank-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:1.25rem 0 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.bank-details>div { min-width:0; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.bank-details>div:nth-child(odd) { border-right:1px solid var(--line); }
.bank-details>div:last-child { border-bottom:0; }
.bank-details dt { color:var(--muted); font-size:.65rem; font-weight:700; text-transform:uppercase; }
.bank-details dd { margin:.25rem 0 0; overflow-wrap:anywhere; font-size:.88rem; font-weight:700; }
.copy-button { width:100%; min-height:42px; margin-top:.8rem; border:1px solid #bed4e5; border-radius:8px; color:var(--blue); background:#f5faff; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.copy-status { min-height:1.1rem; margin:.3rem 0 0; color:var(--green-dark); font-size:.72rem; font-weight:700; text-align:center; }
.payment-notice { margin-top:.8rem; padding:.85rem 1rem; border-left:4px solid var(--green); border-radius:0 9px 9px 0; color:#38536e; background:#eff9f1; font-size:.78rem; line-height:1.5; }
.receipt-upload { margin-top:1rem; padding:1rem; border:1px dashed #9fc7df; border-radius:14px; background:#f7fbfe; }
.receipt-upload__heading { display:flex; gap:.7rem; align-items:center; }
.receipt-upload__heading>span { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:10px; background:#e2f1fa; font-size:1.15rem; }
.receipt-upload__heading p { margin:0 0 .2rem; color:var(--green-dark); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.receipt-upload__heading h3 { margin:0; font-size:.92rem; }
.receipt-picker { display:inline-flex; gap:.45rem; align-items:center; justify-content:center; min-height:42px; margin-top:.9rem; padding:.7rem 1rem; border-radius:8px; color:#fff; background:linear-gradient(90deg,var(--blue),var(--cyan)); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.receipt-upload>input[type=file] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.receipt-picker:focus-within { outline:3px solid rgb(7 94 212 / 22%); outline-offset:3px; }
.receipt-help { margin:.5rem 0 0; color:var(--muted); font-size:.7rem; }
.receipt-preview { display:flex; gap:.75rem; align-items:flex-start; margin-top:.8rem; }
.receipt-preview img { display:block; width:min(150px,100%); max-height:140px; object-fit:cover; border:1px solid var(--line); border-radius:8px; background:#fff; }
.receipt-change { min-height:38px; padding:.55rem .75rem; border:1px solid #bed4e5; border-radius:8px; color:var(--blue); background:#fff; font-size:.68rem; font-weight:700; cursor:pointer; }
.receipt-file-status { min-height:1.1rem; margin:.45rem 0 0; color:var(--muted); font-size:.7rem; }
.receipt-file-status.is-error { color:#b52222; font-weight:700; }
.receipt-file-status.is-success { color:var(--green-dark); font-weight:700; }
.transfer-status { min-height:1.2rem; margin:.75rem 0 0; color:var(--green-dark); font-size:.78rem; font-weight:700; text-align:center; }
.modal-actions { display:grid; grid-template-columns:auto 1fr; gap:.75rem; margin-top:.75rem; }
.modal-button { min-height:46px; padding:.7rem 1rem; border-radius:9px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.modal-button--back { border:1px solid #cbdbe6; color:var(--navy); background:#fff; }
.modal-button--confirm { border:0; color:#fff; background:linear-gradient(90deg,var(--green-dark),#58c344); box-shadow:0 9px 20px rgb(37 165 62 / 20%); }
.modal-button:disabled { opacity:.7; cursor:wait; }
.modal-button:focus-visible,.copy-button:focus-visible { outline:3px solid rgb(7 94 212 / 22%); outline-offset:3px; }
@media (max-width:850px) { .field-grid--four,.field-grid--three { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
  .page-container { width:calc(100% - 1.5rem); }
  .order-header { min-height:82px; padding-block:.4rem; }
  .order-brand { width:126px; height:66px; }
  .header-copy strong { font-size:.82rem; }
  .intro { padding-block:1.4rem 1.6rem; }
  .intro h1 { font-size:clamp(1.8rem,9vw,2.6rem); }
  .intro>p:last-child { font-size:.82rem; }
  .form-section { padding:1.1rem; border-radius:15px; }
  .section-heading { margin-bottom:1.2rem; }
  .section-number { font-size:2rem; }
  .section-heading h2 { font-size:1rem; }
  .field-grid--two,.field-grid--four,.field-grid--three,.water-layout { grid-template-columns:1fr; }
  .location-flow { display:none; }
  .total-card { align-items:center; min-height:104px; }
  .form-actions { display:grid; grid-template-columns:1fr; }
  .action-button { width:100%; }
  .action-button--continue { grid-row:1; }
  .transfer-modal { width:calc(100% - 1rem); max-height:calc(100dvh - 1rem); border-radius:15px; }
  .modal-content { padding:1.1rem; }
  .bank-details { grid-template-columns:1fr; }
  .bank-details>div:nth-child(odd) { border-right:0; }
  .bank-details>div:last-child { border-bottom:0; }
  .modal-actions { grid-template-columns:1fr; }
  .modal-button--confirm { grid-row:1; }
  .receipt-preview { flex-direction:column; }
}
@media (max-width:360px) { .page-container { width:calc(100% - 1rem); } .header-copy span { font-size:.55rem; } .header-copy strong { font-size:.7rem; } .form-section { padding-inline:.85rem; } }
@supports (overflow:clip) { html,body,.order-page { overflow-x:clip; } }
@media (prefers-reduced-motion:reduce) { .field input,.field select { transition:none; } }

/* Escala de lectura: formulario y transferencia Cliente */
:root { --font-xs:.8125rem; --font-sm:.875rem; --font-base:1rem; --font-md:1.0625rem; font-family:Arial,Helvetica,sans-serif; }
html,body,button,input,select,textarea { font-family:Arial,Helvetica,sans-serif; }
.header-copy span,.eyebrow,.modal-eyebrow { font-size:.8rem; }
.header-copy strong { font-size:1rem; }
.form-intro p,.section-heading p,.field small,.field-error,.location-flow,.form-notice,.modal-intro,.modal-message { font-size:.88rem; line-height:1.45; }
.section-heading h2 { font-size:1.25rem; }
.field label,.water-picker label,.bank-details dt,.receipt-heading p { font-size:.84rem; }
.field input,.field select,.water-picker select,.bank-details dd { font-size:1rem; }
.water-picker small,.total-card span,.receipt-picker small { font-size:.84rem; }
.total-card strong { font-size:1.75rem; }
.action-button,.modal-button,.copy-account,.receipt-picker label { font-size:.84rem; }
.bank-details { gap:12px; }
@media (max-width:560px) { .header-copy span,.eyebrow,.modal-eyebrow { font-size:.75rem; } .field label,.water-picker label,.bank-details dt { font-size:.8rem; } .form-intro p,.section-heading p,.field small,.field-error,.form-notice,.modal-intro,.modal-message { font-size:.84rem; } }