:root { --fondo: #f5f3ee; --texto: #1d1f1a; --suave: #5e6158; --acento: #2d6a3e; --tarjeta: #ffffff; --borde: #e3e0d6; }
@media (prefers-color-scheme: dark) { :root { --fondo: #151713; --texto: #ecebe6; --suave: #a7a99f; --acento: #7cc28c; --tarjeta: #1f221d; --borde: #33362f; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
a { color: var(--acento); }
header, main, footer { max-width: 920px; margin: 0 auto; padding: 0 20px; }
header { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
.marca { font-weight: 800; font-size: 22px; color: var(--texto); text-decoration: none; letter-spacing: -0.02em; }
nav a { margin-left: 16px; font-size: 15px; }
.portada { padding: 56px 0 32px; }
.portada h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.03em; }
.portada p { font-size: 20px; color: var(--suave); max-width: 640px; }
.pronto { display: inline-block; margin-top: 12px; padding: 12px 18px; border-radius: 12px; background: var(--acento); color: #fff; font-weight: 600; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 24px 0 48px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 20px; }
.tarjeta h2 { font-size: 18px; margin: 0 0 6px; }
.tarjeta p { margin: 0; color: var(--suave); font-size: 15px; }
.legal { padding: 32px 0 48px; max-width: 720px; }
.legal h1 { font-size: 34px; }
.legal h2 { font-size: 21px; margin-top: 32px; }
.nota { color: var(--suave); font-size: 14px; }
footer { padding: 24px 20px 40px; color: var(--suave); font-size: 14px; border-top: 1px solid var(--borde); }
footer a { margin-right: 14px; }