/* Giftcards de KRASA: los 3 diseños de Agus (giftcard-editable.html, 2026-10-12). Solo la paleta de la marca.
 * La tarjeta mide 900×540 y se escala con transform dentro de .kgc-wrap. --kgc-brand pasa a Amarego cuando esté. */
.kgc-wrap { position: relative; width: 100%; aspect-ratio: 900 / 540; overflow: hidden; border-radius: 12px; box-shadow: 0 14px 34px rgba(28, 28, 28, 0.22); }
.kgc { --kgc-brand: var(--font-display, 'Cormorant Garamond', serif); --kgc-sub: 'Antic Didone', serif; position: absolute; left: 0; top: 0; width: 900px; height: 540px; overflow: hidden; transform-origin: 0 0; font-family: 'Montserrat', system-ui, sans-serif; color: #1C1C1C; line-height: 1.5; text-align: left; }
.kgc * { margin: 0; padding: 0; box-sizing: border-box; }
.kgc-abs { position: absolute; }
.kgc-logo { line-height: 1; }
.kgc-logo b { display: block; font-family: var(--kgc-brand); font-weight: 600; font-size: 30px; letter-spacing: 0.2em; }
.kgc-logo i { display: block; font-family: var(--kgc-sub); font-style: normal; font-size: 9px; letter-spacing: 0.38em; margin-top: 5px; }
.kgc-cap { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; }
.kgc-f { display: flex; align-items: flex-end; gap: 12px; margin-top: 22px; }
.kgc-f span { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; white-space: nowrap; padding-bottom: 3px; }
.kgc-f i { flex: 1; min-width: 0; border-bottom: 1px solid currentColor; min-height: 22px; font-style: normal; font-family: var(--kgc-brand); font-size: 21px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px 1px; }
.kgc-small { font-size: 12.5px; line-height: 1.7; }
/* "Cómo usarla": más grande que kgc-small porque la tarjeta se ve achicada y no se llegaba a leer (Agus, 2026-10-12). */
.kgc-how { font-size: 18px; line-height: 1.45; }
.kgc-mono { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--kgc-brand); font-weight: 600; }
.kgc-msg { font-family: var(--kgc-brand); font-style: italic; font-weight: 500; line-height: 1.1; overflow-wrap: anywhere; }

/* Selector de diseño y frente/dorso (sitio y panel) */
.kgc-sides { display: flex; gap: 8px; }
.kgc-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.kgc-dsg { min-height: 44px; border: 1px solid #1C1C1C; border-radius: 12px; background: #FFFFFF; padding: 8px; cursor: pointer; text-align: center; font-size: 13px; font-weight: 600; color: #1C1C1C; }
.kgc-dsg i { display: block; height: 40px; margin-bottom: 6px; border: 1px solid #E5E3DF; border-radius: 8px; }
.kgc-dsg[aria-pressed="true"] { background: #D8C4E6; }