:root{
  --tinta:#0f172a; --suave:#475569; --linea:#e2e8f0; --fondo:#ffffff;
  --papel:#f8fafc; --acento:#0d6b4f; --acento2:#0a5540; --aviso:#b45309;
  --error:#b91c1c; --ok:#166534; --radio:12px;
}
@media (prefers-color-scheme: dark){
  :root{ --tinta:#e2e8f0; --suave:#94a3b8; --linea:#1e293b; --fondo:#0b1220;
         --papel:#111a2b; --acento:#34d399; --acento2:#6ee7b7; }
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta);background:var(--fondo);-webkit-text-size-adjust:100%}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
.env{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{border-bottom:1px solid var(--linea);position:sticky;top:0;
  background:var(--fondo);z-index:10}
.top .env{display:flex;align-items:center;gap:20px;height:64px;flex-wrap:wrap}
.marca{font-weight:700;font-size:1.15rem;color:var(--tinta)}
.marca span{color:var(--acento)}
nav{display:flex;gap:18px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav a{color:var(--suave);font-size:.95rem}
nav a.activo{color:var(--tinta);font-weight:600}
.btn{display:inline-block;background:var(--acento);color:#fff;padding:10px 18px;
  border-radius:var(--radio);font-weight:600;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--acento2);text-decoration:none;color:#fff}
.btn.linea{background:transparent;color:var(--acento);border:1.5px solid var(--acento)}
.btn.linea:hover{background:var(--papel);color:var(--acento)}
.hero{padding:72px 0 56px}
.hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}
.hero p.lead{font-size:1.15rem;color:var(--suave);max-width:56ch;margin:0 0 28px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tarjeta{border:1px solid var(--linea);border-radius:var(--radio);padding:22px;
  background:var(--papel)}
.tarjeta h3{margin:0 0 6px;font-size:1.1rem}
.tarjeta .precio{font-size:1.5rem;font-weight:700;margin:10px 0 2px}
.tarjeta .unidad{color:var(--suave);font-size:.9rem}
.tarjeta ul{padding-left:18px;margin:14px 0 0;color:var(--suave);font-size:.95rem}
section{padding:44px 0;border-top:1px solid var(--linea)}
section h2{font-size:1.6rem;margin:0 0 6px}
section p.sub{color:var(--suave);margin:0 0 26px}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea)}
th{color:var(--suave);font-weight:600;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.04em}
.tabla-env{overflow-x:auto}
form.caja{max-width:440px}
label{display:block;margin:14px 0 6px;font-weight:600;font-size:.92rem}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--linea);
  border-radius:10px;font:inherit;background:var(--fondo);color:var(--tinta)}
textarea{min-height:120px;resize:vertical}
.avisos{margin:18px 0}
.msg{padding:12px 14px;border-radius:10px;margin:8px 0;font-size:.95rem}
.msg.ok{background:#dcfce7;color:var(--ok)}
.msg.error{background:#fee2e2;color:var(--error)}
.msg.aviso{background:#fef3c7;color:var(--aviso)}
@media (prefers-color-scheme: dark){
  .msg.ok{background:#052e1a;color:#4ade80}
  .msg.error{background:#3f0d0d;color:#fca5a5}
  .msg.aviso{background:#3b2a06;color:#fcd34d}
}
.saldo{display:flex;align-items:baseline;gap:10px;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);padding:20px 24px}
.saldo b{font-size:2.2rem;color:var(--acento)}
.etiqueta{display:inline-block;font-size:.75rem;padding:3px 9px;border-radius:999px;
  background:var(--linea);color:var(--suave)}
.etiqueta.pagada{background:#dcfce7;color:var(--ok)}
.etiqueta.pendiente{background:#fef3c7;color:var(--aviso)}
.ahorro{color:var(--acento);font-weight:600;font-size:.85rem}
footer{border-top:1px solid var(--linea);padding:30px 0;color:var(--suave);
  font-size:.9rem;margin-top:40px}