/* ============================================================
 * hmgiftcard · Cara de tarjeta compuesta (réplica de final-giftcards.jsx)
 * Reutilizada en: configurador (ficha), landing y panel BO.
 * Canvas de referencia 800×500 (1.6:1). container-type: inline-size
 * (la altura sale del aspect-ratio); fuentes en cqw para escalar.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&family=Jost:wght@300;400;500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&display=swap');

.hmgc-cardface,
.hmgc-cardback {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1.6 / 1;
	border-radius: 16px;
	overflow: hidden;
	container-type: inline-size;
	font-family: "Jost", var(--hk-font-sans, sans-serif);
	box-shadow: 0 14px 40px rgba(58,44,40,.16);
	background-image: radial-gradient(circle at 50% 28%, rgba(255,255,255,.07), transparent 60%);
}

/* Tinte claro/oscuro según el fondo (mismo criterio que el jsx) */
.hmgc-cardface.is-dark, .hmgc-cardback.is-dark {
	color: #F6ECDD;
	--hmgc-soft: rgba(246,236,221,.62);
	--hmgc-line: rgba(246,236,221,.34);
	--hmgc-motif: rgba(246,236,221,.60);
}
.hmgc-cardface.is-light, .hmgc-cardback.is-light {
	color: #3A2C28;
	--hmgc-soft: rgba(58,44,40,.55);
	--hmgc-line: rgba(58,44,40,.22);
	--hmgc-motif: rgba(58,44,40,.46);
}

/* Marco fino */
.hmgc-cf-frame {
	position: absolute;
	top: 5.2%; left: 3.25%; right: 3.25%; bottom: 5.2%;
	border: 1px solid var(--hmgc-line);
	border-radius: 10px;
	pointer-events: none;
}

/* Motivo (SVG tintado por máscara) */
.hmgc-cf-motif {
	position: absolute;
	top: 8.8%; left: 50%;
	transform: translateX(-50%);
	width: 8.25%;
	aspect-ratio: 1;
	background-color: var(--hmgc-motif);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}

/* Wordmark (placeholder hasta el logo real) */
.hmgc-cf-brand {
	position: absolute;
	top: 24%; left: 0; right: 0;
	text-align: center;
	font-family: "Dancing Script", cursive;
	font-weight: 600;
	font-size: 3.75cqw;
	line-height: 1;
}

/* Antetítulo (una sola línea para que no choque con el título) */
.hmgc-cf-ante {
	position: absolute;
	top: 31%; left: 0; right: 0;
	text-align: center;
	font-size: 1.5cqw;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--hmgc-soft);
	padding-left: .34em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Título / ocasión */
.hmgc-cf-title {
	position: absolute;
	top: 39%; left: 0; right: 0;
	text-align: center;
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 7.5cqw;
	line-height: 1.04;
	padding: 0 6%;
}
.hmgc-cf-title.is-long { font-size: 6.25cqw; }

/* Filete divisor */
.hmgc-cf-rule {
	position: absolute;
	top: 60%; left: 50%;
	transform: translateX(-50%);
	width: 8.75%;
	height: 1.5px;
	background: var(--hmgc-line);
}

/* Dedicatoria (tercio inferior, empieza arriba y crece hacia abajo) */
.hmgc-cf-dedic {
	position: absolute;
	top: 70%; bottom: auto; left: 0; right: 0;
	text-align: center;
	padding: 0 8%;
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-size: 2.375cqw;
	line-height: 1.3;
	word-break: break-word;
}
.hmgc-cf-dedic.is-placeholder { opacity: .42; }

/* ── Reverso (importe) ── */
.hmgc-cb-brand {
	position: absolute;
	top: 19%; left: 0; right: 0;
	text-align: center;
	font-family: "Dancing Script", cursive;
	font-weight: 600;
	font-size: 3.75cqw;
}
.hmgc-cb-label {
	position: absolute;
	top: 28%; left: 0; right: 0;
	text-align: center;
	font-size: 1.5cqw;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--hmgc-soft);
	padding-left: .34em;
	white-space: nowrap;
	overflow: hidden;
}
.hmgc-cb-amount {
	position: absolute;
	top: 37%; left: 0; right: 0;
	text-align: center;
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	font-size: 13cqw;
	line-height: 1;
}
.hmgc-cb-amount .hmgc-cb-cur { font-size: 7.5cqw; color: var(--hmgc-soft); }
.hmgc-cb-foot {
	position: absolute;
	bottom: 12%; left: 0; right: 0;
	text-align: center;
	font-size: 1.3cqw;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hmgc-soft);
}

/* El tema fuerza text-align:left en la columna del producto; lo ganamos
   para que el contenido de la tarjeta quede SIEMPRE centrado. */
.hmgc-cf-brand, .hmgc-cf-ante, .hmgc-cf-title, .hmgc-cf-dedic,
.hmgc-cb-brand, .hmgc-cb-label, .hmgc-cb-amount, .hmgc-cb-foot { text-align: center !important; }

/* El tema impone un line-height absoluto (~21px) que se hereda e infla la caja
   del antetítulo (font 2.7px en miniaturas). Lo normalizamos. */
.hmgc-cf-ante, .hmgc-cb-brand, .hmgc-cb-label, .hmgc-cb-foot { line-height: 1.15; }