:root{
  --navy:#050F2E; --azul:#0C46A8; --luz:#3D8DFF; --bruma:#DCEBFF; --tinta:#0E1A33; --gris:#6B7A99;
  --verde:#12A87B; --azulm:#2F6BFF; --violeta:#7B5BFF; --naranja:#FF7A3D;
}
*{box-sizing:border-box}
body{margin:0;background:#F6F9FF;color:var(--tinta);font:17px/1.6 system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.barra{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid #E8F0FF}
.marca{font-weight:700;letter-spacing:.16em;font-size:.92rem;color:var(--navy)}
.barra nav{display:flex;gap:20px;font-size:.9rem;color:var(--gris)}
.barra nav a:hover{color:var(--azul)}
main{max-width:1120px;margin:0 auto;padding:0 24px 80px}
.portada{padding:64px 0 40px;text-align:center}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--azul);font-weight:600;margin:0 0 12px}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 14px}
.sub{color:#455573;max-width:56ch;margin:0 auto 44px;font-size:1.05rem}
.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cam{background:#fff;border:1px solid #E8F0FF;border-radius:22px;padding:22px;text-align:left;transition:.18s;display:block}
.cam:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(5,15,46,.10);border-color:var(--bruma)}
.figura{position:relative;height:104px;border-radius:18px;margin-bottom:16px;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2))}
.figura::before{content:"";position:absolute;left:26px;top:44px;width:104px;height:34px;border-radius:17px;background:rgba(255,255,255,.92)}
.figura::after{content:"";position:absolute;left:104px;top:30px;width:56px;height:60px;border-radius:30px 26px 26px 30px;background:rgba(255,255,255,.92)}
.ojo{position:absolute;left:128px;top:44px;width:22px;height:22px;border-radius:50%;background:var(--navy);box-shadow:inset 0 0 0 5px #fff}
.ojo::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:6px;border-radius:50%;background:#fff}
.lengua{position:absolute;right:14px;top:58px;width:56px;height:6px;border-radius:3px;background:#FF7A9C}
.verde{--c1:#0E8F6B;--c2:#3FD3A4}
.azul{--c1:#1B4FD8;--c2:#6FA2FF}
.violeta{--c1:#5B3FE0;--c2:#A98BFF}
.naranja{--c1:#E85E23;--c2:#FFA36B}
.cam h2{margin:0 0 6px;font-size:1.22rem}
.cam p{margin:0 0 14px;color:#54627F;font-size:.95rem}
.ir{font-size:.88rem;font-weight:600;color:var(--azul)}
.herramienta{padding:56px 0 20px}
.cabecera-herr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.cabecera-herr h2{margin:0;font-size:1.6rem;letter-spacing:-.01em}
.estado{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--gris);margin:0;background:#fff;border:1px solid #E8F0FF;border-radius:999px;padding:7px 14px}
.punto{width:8px;height:8px;border-radius:50%;background:#B8C4DA}
.estado.escribiendo .punto{background:#FFB020;animation:latir 1s infinite}
.estado.listo .punto{background:var(--verde)}
@keyframes latir{50%{opacity:.35}}
.dos{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:860px){.dos{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid #E8F0FF;border-radius:20px;padding:24px}
.campo{display:block;font-size:.86rem;color:var(--gris);margin-bottom:14px}
.campo input,.campo select{width:100%;margin-top:6px;padding:12px 14px;border:1px solid #DCE6F7;border-radius:12px;font:inherit;color:var(--tinta);background:#FBFDFF}
.campo input:focus,.campo select:focus{outline:2px solid var(--bruma);border-color:var(--azul)}
.fila{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.boton{width:100%;margin-top:6px;padding:14px 18px;border:0;border-radius:14px;background:var(--navy);color:#fff;font:600 .95rem/1 system-ui,sans-serif;cursor:pointer}
.boton:hover{background:#0B1B44}
.boton:disabled{opacity:.4;cursor:not-allowed}
.boton.suave{background:#EDF3FF;color:var(--azul)}
.nota{font-size:.78rem;color:var(--gris);margin:10px 0 0}
.documento{background:#fff;display:flex;flex-direction:column}
.doc-cab{display:flex;justify-content:space-between;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);border-bottom:1px solid #EDF2FA;padding-bottom:10px;margin-bottom:16px}
.doc-pedido{font-size:1rem;color:var(--tinta);margin:0 0 18px;min-height:3em}
.doc-tabla{width:100%;border-collapse:collapse;font-size:.95rem}
.doc-tabla td{padding:9px 0;border-bottom:1px dashed #E7EEF9}
.doc-tabla td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.doc-tabla .total td{border-bottom:0;font-weight:600}
.doc-tabla .precio-fila td{padding-top:14px;font-size:1.35rem;font-weight:700;color:var(--azul)}
.aviso{margin:16px 0;padding:12px 14px;border-radius:12px;background:#FFF3F0;color:#9B2C1B;font-size:.9rem}
.aviso.bien{background:#EFFBF5;color:#0F6B4A}
.doc-pie{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:auto;padding-top:18px}
@media(max-width:520px){.doc-pie{grid-template-columns:1fr}}
.como{padding:56px 0 0}
.como h2{font-size:1.4rem;margin:0 0 18px}
.como ol{margin:0;padding-left:20px;color:#455573}
.como li{margin-bottom:10px}
.pie{border-top:1px solid #E8F0FF;padding:22px;text-align:center;font-size:.85rem;color:var(--gris)}
@media print{.barra,.portada,.como,.pie,.panel:first-child,.doc-pie,.aviso{display:none!important}.documento{border:0;padding:0}main{padding:0}}