/* GREATful - sistema de diseno. Tokens y primitivas prefijadas gf-.
   No estiliza elementos globales: no altera el sitio hasta que un componente use sus clases.
   Oro de texto --gf-gold-ink #7a5a13 (6.12:1) porque el oro de marca #b78a2e da 3.02:1. */
:root {

--gf-bg: #f6f1e8;
--gf-surface: #fffaf2;
--gf-surface-2: #fbf8f1;
--gf-surface-warm: #f9f4ea;

--gf-ink: #1b1b1b;
--gf-muted: #6f675a;

--gf-gold: #b78a2e;
--gf-gold-soft: #d9bf86;
--gf-gold-ink: #7a5a13;
--gf-gold-wash: #f5ead2;
--gf-gold-deep: #6b5014;

--gf-line: #e6d8ba;
--gf-line-soft: rgba(183,138,46,.14);
--gf-shadow: 0 14px 40px rgba(0,0,0,.08);
--gf-shadow-sm: 0 4px 14px rgba(0,0,0,.05);

--gf-r-sm: 14px;
--gf-r: 18px;
--gf-r-lg: 26px;
--gf-r-pill: 999px;

--gf-1: 4px; --gf-2: 8px; --gf-3: 12px; --gf-4: 16px;
--gf-5: 24px; --gf-6: 32px; --gf-7: 48px; --gf-8: 64px; --gf-9: 88px;

--gf-serif: Georgia, 'Times New Roman', 'Droid Serif', serif;
--gf-sans: inherit;
--gf-display: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
--gf-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
--gf-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
--gf-lead: clamp(1rem, .95rem + .35vw, 1.19rem);
--gf-eyebrow: .75rem;
--gf-maxw: 1240px;
}
.gf-wrap { max-width: var(--gf-maxw); margin-inline: auto; padding-inline: var(--gf-5); }
.gf-section { padding-block: var(--gf-7); }
.gf-stack > * + * { margin-top: var(--gf-4); }
.gf-grid { display: grid; gap: var(--gf-5); }
.gf-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gf-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gf-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gf-display { font-family: var(--gf-serif); font-size: var(--gf-display); line-height: 1.06; margin: 0 0 var(--gf-4); }
.gf-h2 { font-family: var(--gf-serif); font-size: var(--gf-h2); line-height: 1.15; margin: 0 0 var(--gf-3); }
.gf-h3 { font-family: var(--gf-serif); font-size: var(--gf-h3); line-height: 1.2; margin: 0 0 var(--gf-2); }
.gf-lead { font-size: var(--gf-lead); line-height: 1.65; color: var(--gf-muted); max-width: 62ch; }
.gf-eyebrow { font-size: var(--gf-eyebrow); font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: var(--gf-gold-ink); }
.gf-muted { color: var(--gf-muted); line-height: 1.7; }
.gf-num { font-variant-numeric: tabular-nums; }
.gf-card { background: var(--gf-surface); border: 1px solid var(--gf-line-soft);
border-radius: var(--gf-r-lg); box-shadow: var(--gf-shadow); overflow: hidden; }
.gf-card-flat { background: var(--gf-surface-2); border: 1px solid var(--gf-line);
border-radius: var(--gf-r); }
.gf-card-body { padding: var(--gf-5); }
.gf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gf-2);
padding: var(--gf-3) var(--gf-5); border-radius: var(--gf-r-pill); border: 1px solid transparent;
font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer;
min-height: 48px; transition: transform .12s ease, box-shadow .12s ease; }
.gf-btn:hover { transform: translateY(-1px); box-shadow: var(--gf-shadow-sm); }
.gf-btn:focus-visible { outline: 3px solid var(--gf-gold-ink); outline-offset: 2px; }
.gf-btn-primary { background: linear-gradient(180deg, var(--gf-gold-soft), var(--gf-gold)); color: #1f1404; }
.gf-btn-dark { background: var(--gf-ink); color: #fff; }
.gf-btn-ghost { background: var(--gf-surface); border-color: var(--gf-line); color: var(--gf-ink); }
.gf-pill { display: inline-flex; align-items: center; gap: var(--gf-2); background: var(--gf-surface);
border: 1px solid var(--gf-line); border-radius: var(--gf-r-pill);
padding: var(--gf-2) var(--gf-4); font-weight: 600; color: #514b43; }
.gf-badge { display: inline-flex; align-items: center; background: var(--gf-gold-wash);
color: var(--gf-gold-deep); border-radius: var(--gf-r-pill);
padding: 6px var(--gf-3); font-weight: 800; font-size: .82rem; }
.gf-price { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 900; line-height: 1;
font-variant-numeric: tabular-nums; }
.gf-price-old { color: var(--gf-muted); text-decoration: line-through; font-size: 1.05rem; }
.gf-save { color: var(--gf-gold-ink); font-weight: 800; }
.gf-opt { color: var(--gf-ink); font: inherit; -webkit-appearance: none; appearance: none; position: relative; display: block; background: var(--gf-surface-2);
border: 1px solid var(--gf-line); border-radius: var(--gf-r);
padding: var(--gf-4); text-align: center; cursor: pointer; }
.gf-opt[aria-pressed="true"], .gf-opt.is-on {
background: var(--gf-surface); border-color: var(--gf-gold);
box-shadow: inset 0 0 0 2px var(--gf-gold), var(--gf-shadow-sm); font-weight: 800; }
.gf-opt[aria-pressed="true"]::after, .gf-opt.is-on::after {
content: "✓"; position: absolute; top: 6px; right: 10px;
color: var(--gf-gold-ink); font-weight: 900; }
.gf-opt:focus-visible { outline: 3px solid var(--gf-gold-ink); outline-offset: 2px; }
.gf-media { display: block; width: 100%; height: auto; background: var(--gf-surface-2); }
.gf-media-1x1 { aspect-ratio: 1 / 1; object-fit: cover; }
.gf-media-16x9 { aspect-ratio: 16 / 9; object-fit: cover; }
.gf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
.gf-btn { transition: none; }
.gf-btn:hover { transform: none; }
}