:root{
  --noche:#262533; --noche-2:#34334a; --papel:#FBF8F4; --blanco:#fff;
  --rosa:#EAB0B1; --naranja:#E39A5B; --naranja-osc:#B8672A; --azul:#9DBADC; --amarillo:#F2EC6D;
  --tinta:#1E1D28; --sub:#5E5C6E; --linea:#E6E1DA; --ok:#2F7D5B; --mal:#B3362C;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.55 Lexend,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300}
b,strong{font-weight:600}
a{color:var(--naranja-osc)}
img{max-width:100%;display:block}

/* cabecera compacta: banda delgada, el formulario se ve sin bajar */
.hero{background:var(--noche);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--amarillo)}
.hero .in{max-width:760px;margin:0 auto;padding:16px 20px 18px;position:relative;z-index:1}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff;text-decoration:none}
.marca img{width:34px;height:34px}
.marca span{font-weight:600;letter-spacing:.04em;font-size:13px;color:#C9C7D6}
.hero h1{font-size:clamp(21px,4.4vw,27px);line-height:1.18;margin:0;font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--amarillo)}
.hero p{margin:6px 0 0;max-width:580px;color:#C4C2D2;font-size:14px;line-height:1.45}
.estrellas{position:absolute;inset:0;pointer-events:none;opacity:.6}
.estrellas i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--amarillo)}

.pasos{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none}
.pasos li{background:var(--noche-2);border-radius:999px;padding:5px 11px 5px 6px;font-size:12.5px;color:#EDECF3;display:flex;align-items:center;gap:7px}
.pasos li b{background:var(--rosa);color:var(--noche);width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}

main{max-width:760px;margin:0 auto;padding:20px 20px 56px}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:24px 22px;margin-bottom:18px}
.tarjeta h2{font-size:19px;margin:0 0 4px;font-weight:600}
.tarjeta .nota{color:var(--sub);font-size:14px;margin:0 0 16px}
.num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--noche);color:var(--amarillo);font-size:13px;font-weight:600;margin-right:8px;vertical-align:2px}

.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo.ancho{grid-column:1/-1}
label.t{font-size:14px;font-weight:500}
label.t small{font-weight:300;color:var(--sub)}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%;font:inherit;font-weight:400;color:var(--tinta);background:#fff;border:1.5px solid var(--linea);border-radius:10px;padding:12px 13px;min-height:48px}
textarea{min-height:84px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(157,186,220,.35)}
.err-campo{border-color:var(--mal)!important}

/* zona de archivos */
.zona{display:block;border:2px dashed #CFC8BE;border-radius:var(--r);padding:30px 18px;text-align:center;cursor:pointer;background:#FDFCFA;transition:.15s}
.zona:hover,.zona.sobre{border-color:var(--naranja);background:#FFF6EE}
.zona .ico{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:var(--rosa);display:grid;place-items:center}
.zona strong{display:block;font-size:17px}
.zona span{color:var(--sub);font-size:14px}
.zona input{display:none}
.lista{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.lista li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;border:1px solid var(--linea);border-radius:10px;padding:8px 10px;background:#fff}
.mini{width:48px;height:48px;border-radius:8px;background:var(--noche-2) center/cover;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600;overflow:hidden}
.lista .nom{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista .peso{font-size:12px;color:var(--sub)}
.barra{height:4px;background:var(--linea);border-radius:4px;margin-top:5px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--naranja);transition:width .2s}
.lista li.listo .barra i{background:var(--ok)}
.quitar{border:0;background:none;color:var(--sub);font-size:22px;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:8px}
.quitar:hover{background:#F3EEE8;color:var(--mal)}

/* opciones */
.opcion{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--linea);border-radius:12px;padding:14px;cursor:pointer;margin-bottom:10px;background:#fff}
.opcion:has(input:checked){border-color:var(--naranja);background:#FFF8F1}
.opcion input{margin:3px 0 0;width:20px;height:20px;accent-color:var(--naranja-osc);flex:none}
.opcion div{font-size:15px}
.opcion small{display:block;color:var(--sub);font-size:13px;margin-top:2px}

.licencia{border:1px solid var(--linea);border-radius:12px;background:#FDFCFA;margin:4px 0 14px}
.licencia summary{cursor:pointer;padding:14px;font-weight:500;font-size:15px;list-style:none}
.licencia summary::after{content:"Leer ▾";float:right;color:var(--naranja-osc);font-size:14px}
.licencia[open] summary::after{content:"Cerrar ▴"}
.licencia .txt{padding:0 16px 8px;font-size:14px;color:#3B3A48}
.licencia .txt p{margin:0 0 10px}

.boton{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;border:0;border-radius:999px;background:var(--noche);color:#fff;font:600 17px Lexend,sans-serif;cursor:pointer;padding:0 24px}
.boton:hover{background:#000}
.boton[disabled]{opacity:.55;cursor:wait}
.boton .flecha{color:var(--amarillo)}
.aviso{border-radius:10px;padding:12px 14px;font-size:14px;margin:12px 0 0;display:none}
.aviso.mal{display:block;background:#FBECEA;color:var(--mal)}
.aviso.info{display:block;background:#EEF3FA;color:#2C4A6E}

.pie{text-align:center;color:var(--sub);font-size:13px;padding:10px 20px 40px}

/* comprobante */
.sello{display:inline-flex;align-items:center;gap:8px;background:#E8F4EE;color:var(--ok);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
.datos{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;font-size:15px;margin:16px 0}
.datos dt{color:var(--sub)}
.datos dd{margin:0;word-break:break-word}
.folio{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.04em;background:var(--noche);color:var(--amarillo);border-radius:10px;padding:8px 14px;display:inline-block}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn2{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--noche);color:var(--noche);text-decoration:none;font-weight:500;background:#fff;cursor:pointer;font:500 15px Lexend,sans-serif}

@media (max-width:600px){
  .campos{grid-template-columns:1fr}
  .tarjeta{padding:20px 16px}
  .hero .in{padding:22px 16px 32px}
  main{padding:20px 16px 48px}
  .datos{grid-template-columns:1fr;gap:2px}
  .datos dd{margin-bottom:10px}
}
@media print{.hero,.acciones,.pie{display:none}body{background:#fff}.tarjeta{border:0}}
