/* ============================================================================
   inloff — Tarjeta regalo
   ----------------------------------------------------------------------------
   Tres sitios con la misma pieza: la página de venta, la hoja para imprimir y
   el correo (ese va con estilos en línea, aquí solo vive lo de la web).

   La tarjeta se dibuja con CSS, sin imagen: así el importe, el nombre y el
   mensaje son texto de verdad (se leen, se copian y se traducen), pesa cero y
   nunca se queda desactualizada respecto a la marca.

   ORDEN DE CARGA — importa mucho: esta hoja se encola ANTES que flatsome.css,
   de modo que a igualdad de especificidad gana el tema padre. Por eso varias
   reglas de aquí llevan un atributo o un ancestro de más que parecerían
   sobrar: no sobran, son lo que hace que la regla gane. Si una declaración
   "no hace nada", lo primero que hay que mirar es si Flatsome tiene la misma
   con igual peso.

   @see inc/inloff-gift-cards-shop.php
   @see assets/css/inloff-tokens.css
   ========================================================================= */

/* ============================================================================
   LA TARJETA
   ----------------------------------------------------------------------------
   No es un rectángulo con borde: es un objeto con valor. Todo lo que la hace
   parecer impresa se consigue apilando capas de fondo sobre el mismo div, sin
   una sola imagen y sin tocar el marcado:

     grano ......... papel, no plástico (ruido SVG, se repite cada 140 px)
     sello ......... dos anillos grabados en el cuarto vacío de abajo; van en
                     porcentajes (elipse) y no en píxeles para que el sello
                     mida siempre lo mismo respecto a la tarjeta, lo mismo a
                     460 px en escritorio que a 300 en el móvil
     trama ......... hilos finísimos cruzados, como el fondo de un billete
     luz ........... reflejo cálido por la esquina superior derecha
     sombra ........ la esquina opuesta se hunde: da grosor
     base .......... navy con un degradado largo, nunca plano

   Encima van el filete de pan de oro (::before) y el brillo especular
   (::after). El texto va por delante de los dos con z-index.
   ========================================================================= */

.inloff-gc-tarjeta {
	--gc-ancho: 100%;
	width: var(--gc-ancho);
	max-width: 460px;
	margin: 0 auto;
	/* La perspectiva vive en el padre para que el giro del marco sea 3D real y
	   no un simple sesgo plano: es lo que hace creíble el balanceo. */
	perspective: 1400px;
}

.inloff-gc-tarjeta__marco {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 8.5 / 5.4;
	padding: clamp(22px, 6%, 38px);
	border-radius: 16px;
	color: var(--inloff-on-navy, #FAF7F2);
	background-color: var(--inloff-navy, #1B2540);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.20'/%3E%3C/svg%3E"),
		radial-gradient(ellipse 17.5% 27.5% at 79% 68%, rgba(215, 184, 158, 0) 0 93%, rgba(215, 184, 158, 0.17) 94% 97%, rgba(215, 184, 158, 0) 98%),
		radial-gradient(ellipse 13.5% 21.2% at 79% 68%, rgba(215, 184, 158, 0) 0 92%, rgba(215, 184, 158, 0.10) 94% 97%, rgba(215, 184, 158, 0) 98%),
		radial-gradient(ellipse 13.5% 21.2% at 79% 68%, rgba(197, 161, 132, 0.07) 0%, rgba(197, 161, 132, 0) 100%),
		repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.032) 0 1px, rgba(255, 255, 255, 0) 1px 9px),
		repeating-linear-gradient(-118deg, rgba(255, 255, 255, 0.018) 0 1px, rgba(255, 255, 255, 0) 1px 15px),
		radial-gradient(120% 130% at 84% 0%, rgba(197, 161, 132, 0.30) 0%, rgba(197, 161, 132, 0) 58%),
		radial-gradient(95% 115% at 4% 100%, rgba(6, 10, 20, 0.55) 0%, rgba(6, 10, 20, 0) 64%),
		linear-gradient(152deg, #2B3B65 0%, var(--inloff-navy, #1B2540) 46%, #121828 100%);
	/* Solo el grano se tesela; las demás capas son una por tarjeta. */
	background-size: 140px 140px, auto, auto, auto, auto, auto, auto, auto, auto;
	/* Las dos primeras sombras son el canto del cartón (luz arriba, sombra
	   abajo). Las tres últimas son la distancia al fondo: una tarjeta sostenida
	   en el aire proyecta cerca y lejos a la vez, no una sola mancha difusa. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(6, 10, 20, 0.55),
		0 0 0 1px rgba(10, 15, 30, 0.45),
		0 2px 4px rgba(15, 21, 38, 0.26),
		0 12px 24px rgba(15, 21, 38, 0.22),
		0 30px 64px rgba(15, 21, 38, 0.30);
	overflow: hidden;
	/* Encierra el apilado de las capas dentro de la tarjeta: sin esto, los
	   z-index de dentro compiten con el resto de la página. */
	isolation: isolate;
}

/* El filete impreso. Es un degradado metálico recortado a la anchura del
   borde (máscara padding-box XOR borde): un `border` de color plano se ve
   pintado, y un pan de oro real cambia de tono a lo largo del trazo. */
.inloff-gc-tarjeta__marco::before {
	content: "";
	position: absolute;
	inset: 11px;
	z-index: 2;
	border: 1px solid transparent;
	border-radius: 9px;
	pointer-events: none;
	background:
		linear-gradient(135deg, #EFD9C0 0%, #A9825C 20%, #F6E7D3 36%, #8E6B48 52%, #E3C9AE 68%, #9A7450 84%, #EFD9C0 100%)
		border-box;
	-webkit-mask:
		linear-gradient(#000 0 0) padding-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0.8;
}

/* El brillo especular. Va más ancho que la tarjeta (inset negativo) para poder
   barrerla de lado a lado sin que asome el canto de la banda. */
.inloff-gc-tarjeta__marco::after {
	content: "";
	position: absolute;
	inset: -30% -55%;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0) 58%);
}

/* El texto, por delante del filete y del brillo. */
.inloff-gc-tarjeta__marca,
.inloff-gc-tarjeta__rotulo,
.inloff-gc-tarjeta__saldo,
.inloff-gc-tarjeta__personas,
.inloff-gc-tarjeta__mensaje,
.inloff-gc-tarjeta__codigo {
	position: relative;
	z-index: 4;
}

/* El logotipo real, en negativo. Ancho relativo a la tarjeta para que escale
   con ella: la tarjeta cambia de tamaño en tres sitios (previsualización,
   muestra del héroe y hoja de imprimir) y un ancho en píxeles se vería enorme
   en una y diminuto en otra. `height: auto` con el `width`/`height` del HTML
   reserva el hueco y evita el salto al cargar. */
.inloff-gc-tarjeta__marca {
	display: block;
	width: clamp(104px, 34%, 150px);
	height: auto;
	margin: 0;
}

/* Los dos párrafos que el formulario rellena en vivo nacen vacíos y con
   `hidden`. `[hidden]` no tiene especificidad —es una regla del navegador— y
   cualquier `p { display: block }` de un theme padre le gana, así que se
   refuerza aquí en lugar de confiar en el valor por defecto. Ya pasó en el
   área de cliente: el buscador decía «1 artículo» y enseñaba cuatro. */
.inloff-gc-tarjeta [hidden] {
	display: none !important;
}

.inloff-gc-tarjeta__rotulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: auto 0 2px;
	font-family: var(--inloff-font-sans, sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--inloff-heart-light, #D7B89E);
}

/* Filete de entrada al rótulo: el recurso editorial de toda la vida para que
   un antetítulo no quede flotando en medio del vacío. */
.inloff-gc-tarjeta__rotulo::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 1px;
	background: linear-gradient(90deg, rgba(215, 184, 158, 0.15), var(--inloff-heart-light, #D7B89E));
}

.inloff-gc-tarjeta__saldo {
	margin: 0;
	font-family: var(--inloff-font-serif, Georgia, serif);
	font-size: clamp(2rem, 9vw, 3rem);
	font-weight: 600;
	line-height: 1;
	color: var(--inloff-on-navy, #FAF7F2);
	/* Grabado: sombra arriba y filo de luz abajo. La cifra deja de estar
	   "puesta encima" y pasa a estar hundida en el cartón. */
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.10),
		0 -1px 2px rgba(6, 10, 20, 0.45);
}

/* wc_price() envuelve la cifra en spans propios y WooCommerce les pone un
   #111 que gana a la herencia: sobre el navy de la tarjeta se quedaba en
   1,5:1. Forzamos el color de la tarjeta en toda la cifra. */
.inloff-gc-tarjeta__saldo,
.inloff-gc-tarjeta__saldo * {
	color: var(--inloff-on-navy, #FAF7F2) !important;
}

/* El € iba a 0,6em levantado 0,35em: a ese tamaño parecía una llamada a nota
   al pie colgando de la cifra. Más pequeño y casi en la línea base se lee como
   lo que es, la unidad del importe. */
.inloff-gc-tarjeta__saldo .woocommerce-Price-currencySymbol {
	font-size: 0.44em;
	vertical-align: 0.14em;
	margin-left: 0.26em;
}

.inloff-gc-tarjeta__personas {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: rgba(250, 247, 242, 0.78);
}

.inloff-gc-tarjeta__mensaje {
	margin: 6px 0 0;
	font-family: var(--inloff-font-serif, Georgia, serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(250, 247, 242, 0.92);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.inloff-gc-tarjeta__codigo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(250, 247, 242, 0.16);
}

.inloff-gc-tarjeta__codigo span {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(250, 247, 242, 0.52);
}

.inloff-gc-tarjeta__codigo strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--inloff-heart-light, #D7B89E);
}

/* — El balanceo -------------------------------------------------------------
   Solo lo hace la tarjeta de muestra (el escaparate). La previsualización del
   formulario NO se mueve a propósito: es un instrumento de trabajo, y algo
   oscilando en el rabillo del ojo mientras se rellenan seis campos cansa.

   El eje de giro está POR ENCIMA de la tarjeta (transform-origin -34%), que es
   lo que convierte el giro en un péndulo: un objeto sostenido en el aire, no
   un naipe girando sobre su centro. El recorrido real son unos 9 px y el ciclo
   dura 11 s, el doble de lento que cualquier animación de interfaz.
   -------------------------------------------------------------------------- */

@keyframes inloff-gc-balanceo {
	0%   { transform: rotateZ(-2.1deg) rotateY(-3.4deg) rotateX(1.2deg) translate3d(0, 0, 0); }
	50%  { transform: rotateZ(1.5deg) rotateY(3.6deg) rotateX(-1deg) translate3d(0, -7px, 0); }
	100% { transform: rotateZ(-2.1deg) rotateY(-3.4deg) rotateX(1.2deg) translate3d(0, 0, 0); }
}

/* El brillo va sincronizado con el vaivén: si la luz no se moviera con el
   objeto, el objeto no parecería estar girando de verdad. */
@keyframes inloff-gc-reflejo {
	0%   { transform: translateX(-16%); }
	50%  { transform: translateX(16%); }
	100% { transform: translateX(-16%); }
}

.inloff-gc-muestra .inloff-gc-tarjeta__marco {
	transform-origin: 50% -34%;
	animation: inloff-gc-balanceo 11s ease-in-out infinite;
}

.inloff-gc-muestra .inloff-gc-tarjeta__marco::after {
	animation: inloff-gc-reflejo 11s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	/* Sin movimiento, pero la tarjeta conserva su inclinación de reposo: quien
	   pide menos animación no tiene por qué recibir además un diseño más
	   pobre. */
	.inloff-gc-muestra .inloff-gc-tarjeta__marco {
		animation: none;
		transform: rotateZ(-1.4deg) rotateY(-2deg);
	}

	.inloff-gc-muestra .inloff-gc-tarjeta__marco::after {
		animation: none;
	}

	.inloff-gc-chip {
		transition: none;
	}
}

/* ============================================================================
   EL FORMULARIO DE COMPRA
   ========================================================================= */

.inloff-gc-compra {
	display: grid;
	gap: 28px;
	align-items: start;
}

/* Flatsome convierte `form.cart` en una rejilla de DOS columnas para poner la
   cantidad y el botón en línea. Medido el 2026-09-22 en la ficha del producto:
   salía `grid-template-columns: 132px 336px`, y todo el formulario de la tarjeta
   caía dentro de la columna estrecha de la cantidad — los campos quedaban a 67 px
   y las opciones de entrega partían las palabras en tres líneas.

   Son DOS formularios distintos y cada uno se arregla por su lado:

   - En la ficha, el formulario es el `form.cart` de WooCommerce (sin clase
     nuestra) y el personalizador va dentro. Lo que lo arregla es el
     `grid-column: 1 / -1` de `.inloff-gc-form`: ocupa las dos columnas.
   - El del atajo `[inloff_tarjeta_regalo]` sí es nuestro y no lleva cantidad
     ninguna, así que se le quita la rejilla entera. */
.inloff-gc-compra__form.cart {
	display: block;
}

.inloff-gc-form {
	display: grid;
	gap: 24px;
	grid-column: 1 / -1;
	width: 100%;
}

/* Flatsome le pone `margin-bottom: 1em` a todo input/textarea/fieldset. Sumado
   al `gap` del grid, el aire entre campos salía de 36 px sin que nadie lo
   hubiera decidido, y el campo del importe medía 67 px de alto para un input
   de 48. El ritmo lo manda el `gap`; los márgenes del padre, fuera. */
.inloff-gc-form input,
.inloff-gc-form textarea,
.inloff-gc-form select,
.inloff-gc-form fieldset {
	margin-bottom: 0;
}

.inloff-gc-field {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Dos de los seis rótulos son <legend> y Flatsome le pone a los legend un
   filete inferior de 1 px: la mitad de los campos salía subrayada y la otra
   mitad no, sin que eso significara nada. */
.inloff-gc-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	font-family: var(--inloff-font-sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--inloff-navy, #1B2540);
}

/* Los textos de apoyo son <span> dentro de un <label>, y Flatsome pone los
   labels en negrita: la ayuda salía a 700 y pesaba más que el propio campo. */
.inloff-gc-ayuda {
	display: block;
	margin: 6px 0 0;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--inloff-muted-warm, #6B6560);
}

/* «(opcional)» es una matización del rótulo, no una línea aparte: en bloque
   partía «Tu mensaje» en dos renglones y parecía un salto accidental. */
.inloff-gc-label .inloff-gc-ayuda {
	display: inline;
	margin: 0 0 0 6px;
}

.inloff-gc-importes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.inloff-gc-chip {
	flex: 1 1 auto;
	min-width: 84px;
	min-height: 48px;
	padding: 12px 16px;
	font-family: var(--inloff-font-sans, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--inloff-navy, #1B2540);
	background: var(--inloff-surface, #fff);
	border: 1px solid var(--inloff-line-warm, #E8E2D5);
	border-radius: var(--inloff-radius-pill, 999px);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.inloff-gc-chip:hover {
	border-color: var(--inloff-heart, #C5A184);
}

.inloff-gc-chip.is-activo {
	background: var(--inloff-navy, #1B2540);
	border-color: var(--inloff-navy, #1B2540);
	color: var(--inloff-on-navy, #FAF7F2);
}

.inloff-gc-chip:focus-visible,
.inloff-gc-form input:focus-visible,
.inloff-gc-form textarea:focus-visible {
	outline: 3px solid var(--inloff-bronze, #7E5E3B);
	outline-offset: 2px;
}

.inloff-gc-otro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 12px;
}

.inloff-gc-otro__txt {
	font-size: 0.9375rem;
	color: var(--inloff-ink-soft, #4A4A4A);
}

/* El anillo del campo lo dibuja este envoltorio, porque dentro caben el número
   y el símbolo de moneda. */
.inloff-gc-otro__campo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	background: var(--inloff-surface, #fff);
	border: 1px solid var(--inloff-field-line, #968F80);
	border-radius: var(--inloff-radius-sm, 8px);
}

/* Los dos anillos que se veían: el input conservaba el `border: 1px solid #ddd`
   y la sombra interior de Flatsome DENTRO del anillo del envoltorio. La regla
   anterior (`.inloff-gc-otro__campo input`) empataba en especificidad con
   `input[type="number"]` del padre y perdía por orden de carga; con el atributo
   explícito gana, y el campo vuelve a ser un solo recuadro. */
.inloff-gc-otro__campo input[type="number"] {
	width: 6ch;
	flex: 0 0 auto;
	min-height: 48px;
	height: auto;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--inloff-navy, #1B2540);
	background: transparent;
	border: 0;
	box-shadow: none;
}

.inloff-gc-otro__campo span {
	font-weight: 600;
	color: var(--inloff-navy, #1B2540);
}

.inloff-gc-entrega {
	display: grid;
	gap: 8px;
}

/* Flatsome pone los <label> en negrita; aquí el label es una tarjeta entera de
   texto corrido, así que el peso vuelve a normal y el <strong> recupera su
   papel de énfasis (si no, el titular de la opción salía en Black). */
.inloff-gc-radio {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 14px 16px;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	background: var(--inloff-surface, #fff);
	border: 1px solid var(--inloff-line-warm, #E8E2D5);
	border-radius: var(--inloff-radius, 14px);
	cursor: pointer;
}

.inloff-gc-radio strong {
	font-weight: 600;
}

/* El estado estaba del revés: la opción marcada se pintaba del mismo crema que
   el fondo de la sección (se fundía) y la no marcada quedaba en blanco puro
   (destacaba). Encima, el único distintivo era un borde a 2,31:1, por debajo
   del 3:1 que pide WCAG 1.4.11 para indicadores no textuales. Ahora la marcada
   es la que se levanta: anillo navy (15:1 contra el blanco) y sombra. */
.inloff-gc-radio:has(input:checked) {
	background: var(--inloff-surface, #fff);
	border-color: var(--inloff-navy, #1B2540);
	box-shadow:
		inset 0 0 0 1px var(--inloff-navy, #1B2540),
		0 2px 10px rgba(27, 37, 64, 0.08);
}

.inloff-gc-radio input {
	margin-top: 3px;
	accent-color: var(--inloff-navy, #1B2540);
}

.inloff-gc-radio .inloff-gc-ayuda {
	margin-top: 2px;
}

.inloff-gc-destinatario {
	display: grid;
	gap: 24px;
}

.inloff-gc-form input[type="text"],
.inloff-gc-form input[type="email"],
.inloff-gc-form input[type="date"],
.inloff-gc-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--inloff-font-sans, sans-serif);
	font-size: 1rem;
	color: var(--inloff-ink, #2C2C2C);
	background: var(--inloff-surface, #fff);
	border: 1px solid var(--inloff-field-line, #968F80);
	border-radius: var(--inloff-radius-sm, 8px);
	box-shadow: none;
}

.inloff-gc-form textarea {
	min-height: 96px;
	line-height: 1.5;
	resize: vertical;
}

/* El contador pertenece al campo que mide: alineado a su borde derecho se lee
   como parte del textarea y no como una frase suelta en el margen. */
.inloff-gc-form textarea + .inloff-gc-ayuda {
	text-align: right;
}

.inloff-gc-compra .inloff-gc-submit,
.inloff-gc-compra .inloff-gc-submit:hover,
.woocommerce .inloff-gc-submit,
.woocommerce .inloff-gc-submit:hover {
	/* Centrado por flex y no por line-height: el alto lo manda `min-height`, y
	   un interlineado heredado nunca coincide con él. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin: 0;
	font-family: var(--inloff-font-sans, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--inloff-on-navy, #FAF7F2);
	background-color: var(--inloff-navy, #1B2540);
	border-color: var(--inloff-navy, #1B2540);
	border-radius: var(--inloff-radius-pill, 999px);
	box-shadow: none;
}

.inloff-gc-compra .inloff-gc-submit:hover,
.woocommerce .inloff-gc-submit:hover {
	background-color: var(--inloff-navy-deep, #131A2E);
	border-color: var(--inloff-navy-deep, #131A2E);
}

.inloff-gc-compra__legal {
	text-align: center;
}

/* La tarjeta que acompaña al formulario mientras se baja.
   Medido en producción a 1440: el header fijo acaba en 113 px y la tarjeta
   quedaba en 129, o sea **16 px de separación** — pegada al menú, y con la
   barra de administración de WordPress (32 px más) directamente por debajo de
   él. No es un problema de cálculo del offset: es que un elemento que flota
   necesita aire suficiente para leerse como una pieza aparte y no como una
   franja más de la navegación. 40 px es lo que separa ese bloque del resto. */
.inloff-gc-previa {
	position: sticky;
	top: calc(var(--inloff-header-offset, 96px) + 40px);
}

/* Con la barra de administración el header baja 32 px y se los lleva consigo. */
body.admin-bar .inloff-gc-previa {
	top: calc(var(--inloff-header-offset, 96px) + 72px);
}

.inloff-gc-previa__nota {
	margin-top: 12px;
	text-align: center;
}

@media (min-width: 850px) {
	.inloff-gc-compra {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		gap: 48px;
	}
}

/* En móvil la previsualización iba DESPUÉS de los seis campos: se componía la
   tarjeta a ciegas y solo se veía el resultado al final. Sube al principio, y
   sin sticky: pegada ocuparía un cuarto de pantalla durante todo el
   formulario. */
@media (max-width: 849px) {
	.inloff-gc-previa {
		position: static;
		order: -1;
		margin-bottom: 4px;
	}
}

/* ============================================================================
   LA HOJA PARA IMPRIMIR
   ========================================================================= */

.inloff-gc-imprimir {
	margin: 0;
	padding: 6vh 20px;
	background: var(--inloff-cream-warm, #F5EFE5);
	font-family: var(--inloff-font-sans, sans-serif);
	color: var(--inloff-ink, #2C2C2C);
}

.inloff-gc-hoja {
	max-width: 560px;
	margin: 0 auto;
}

.inloff-gc-hoja .inloff-gc-tarjeta {
	max-width: 520px;
}

.inloff-gc-hoja__pie {
	margin-top: 26px;
	text-align: center;
}

.inloff-gc-hoja__pie p {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--inloff-ink-soft, #4A4A4A);
}

.inloff-gc-hoja__btn {
	min-height: 48px;
	padding: 13px 26px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--inloff-on-navy, #FAF7F2);
	background: var(--inloff-navy, #1B2540);
	border: 0;
	border-radius: var(--inloff-radius-pill, 999px);
	cursor: pointer;
}

@media print {
	.inloff-gc-imprimir {
		padding: 0;
		background: #fff;
	}

	.inloff-gc-hoja__pie button {
		display: none;
	}

	.inloff-gc-tarjeta__marco {
		box-shadow: none;
		/* Que el navy, el grano y el filete salgan en el papel, no en blanco y
		   negro. */
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Ni balanceo ni reflejo en papel: el reflejo sale como una banda gris
	   atravesando la tarjeta, y el balanceo la imprimiría torcida. Va con el
	   mismo selector que la animación porque `@media print` no añade
	   especificidad: con `.inloff-gc-tarjeta__marco` a secas perdería. */
	.inloff-gc-muestra .inloff-gc-tarjeta__marco,
	.inloff-gc-tarjeta__marco {
		animation: none;
		transform: none;
	}

	.inloff-gc-tarjeta__marco::after {
		display: none;
	}
}

/* ============================================================================
   PÁGINA /tarjeta-regalo/
   ========================================================================= */

body.inloff-pag-tarjeta-regalo {
	/* `overflow-x: hidden` convertía el <body> en contenedor de scroll y con eso
	   mataba el `position: sticky` de todo lo que cuelga de él (la tarjeta de
	   previsualización quedaba en top -438 px al bajar). `clip` recorta igual
	   pero no crea contexto de scroll. */
	overflow-x: clip;

	/* El token global resuelve a 24 px porque Flatsome no publica
	   --flatsome--header--sticky-height en esta página. Medido: el header, una
	   vez fijado, mide 70 px en móvil y 113 en escritorio. Sin este valor real,
	   los anclas de la página y la tarjeta sticky se meten debajo del header. */
	--inloff-header-offset: 86px;
}

/* — El raíl ----------------------------------------------------------------
   La página tenía dos arranques: cuatro bandas de crema limitadas a 1190 px
   (con 117,5 px de blanco a cada lado) y la banda navy sangrando a 1440. Eso
   dibujaba un marco blanco en forma de L, y encima el contenido de la banda
   navy empezaba 50 px antes que el del resto.

   Sangran TODAS —los bloques de pie que van debajo ya lo hacían, así que las
   excepcionales eran las de esta página— y el contenido de todas vuelve al
   patrón canónico: x=147,5 con 1130 de ancho a 1440 de viewport.
   -------------------------------------------------------------------------- */

body.inloff-pag-tarjeta-regalo .inloff-tr {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

body.inloff-pag-tarjeta-regalo .inloff-tr > .section-content {
	max-width: calc(var(--inloff-max) - 10px);
	padding-left: 15px;
	padding-right: 15px;
	margin-inline: auto;
}

/* Flatsome usa el mismo píxel para dos cosas: el `padding-bottom: 30px` de cada
   .col separa la última fila del pie de la sección Y separa las columnas entre
   sí cuando se apilan. Ponerlo a 0 arreglaba lo primero y rompía lo segundo:
   medido a 390, los cuatro pasos de la banda navy quedaban a 0 px unos de
   otros, y lo mismo las dos columnas del héroe y las dos de razones. Tres
   bloques distintos leídos como un solo muro.

   El canal se devuelve donde hace falta —entre columnas— y se descuenta una
   sola vez con un margen negativo en la propia fila, que no afecta al canal
   interno. Los dos números tienen que moverse juntos o el pie se descuadra.
   Comprobado inyectando la regla: a 1440 no cambia ni un píxel (las columnas
   van en paralelo, así que el padding solo engorda la fila y el margen se lo
   come); a 390 el canal pasa de 0 a 32 y el aire de pie de las cinco bandas
   sigue clavado en 36/40/40/40/40. */
body.inloff-pag-tarjeta-regalo .inloff-tr .row:last-child > .col {
	padding-bottom: 32px;
}

body.inloff-pag-tarjeta-regalo .inloff-tr .row:last-child {
	margin-bottom: -32px;
}

/* El acordeón de preguntas vive en una columna alineada a la izquierda de su
   fila, y su `max-width` solo lo centraba DENTRO de esa columna: el bloque
   quedaba 96,7 px a la izquierda entre un titular centrado y un párrafo
   centrado. Hay que centrar la COLUMNA, que es un flex item de la fila. */
body.inloff-pag-tarjeta-regalo .inloff-tr-faq__col {
	margin-left: auto;
	margin-right: auto;
}

/* — Fondos ----------------------------------------------------------------- */

body.inloff-pag-tarjeta-regalo .inloff-tr {
	background: var(--inloff-cream-light);
	color: var(--inloff-ink);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-hero,
body.inloff-pag-tarjeta-regalo .inloff-tr-faq {
	background: var(--inloff-cream-warm);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-comprar {
	background: var(--inloff-cream-light);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-pasos {
	background: var(--inloff-navy);
	color: var(--inloff-on-navy);
}

/* — Tipografía -------------------------------------------------------------- */

body.inloff-pag-tarjeta-regalo .inloff-tr-eyebrow {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--inloff-bronze);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-pasos .inloff-tr-eyebrow {
	color: var(--inloff-heart-light);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-h1 {
	margin: 0 0 16px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(2rem, 7vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--inloff-navy);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-h2 {
	margin: 0 0 14px;
	font-family: var(--inloff-font-serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 5vw, 2.35rem);
	line-height: 1.15;
	color: var(--inloff-navy);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-pasos .inloff-tr-h2 {
	color: var(--inloff-on-navy);
}

/* Medida de línea: el tope estaba en `ch` y engañaba. El «0» de Outfit mide
   12,48 px donde el carácter medio del castellano mide 8,33 (una vez y media),
   así que 60ch dejaba pasar líneas de 90 caracteres, muy por encima del rango
   editorial de 45-75. En `em` —que además escala con el propio texto— medido
   sobre esta página: 29em ≈ 66 caracteres. */
body.inloff-pag-tarjeta-regalo .inloff-tr-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
	max-width: 29em;
}

:where(body.inloff-pag-tarjeta-regalo .inloff-tr) p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--inloff-ink-soft);
}

/* Los dos párrafos de esta sección no tenían tope y llegaban a 81 caracteres. */
:where(body.inloff-pag-tarjeta-regalo .inloff-tr-razones) p {
	max-width: 29em;
}

:where(body.inloff-pag-tarjeta-regalo .inloff-tr-pasos) p {
	color: var(--inloff-on-navy-soft);
}

/* Un enlace que solo se distingue por color falla WCAG 1.4.1 si ese color no
   llega a 3:1 contra el texto que lo rodea (aquí estaba en 1,71:1). El
   subrayado lo resuelve sin tocar la paleta. La regla anterior solo cubría
   los <p>, y el correo de contacto vive dentro de un <li>. */
body.inloff-pag-tarjeta-regalo .inloff-tr p a,
body.inloff-pag-tarjeta-regalo .inloff-tr li a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--inloff-bronze);
	text-underline-offset: 3px;
	font-weight: 500;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-paso > .col-inner {
	height: 100%;
	padding: 4px 8px 0 0;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-paso__num {
	margin: 0 0 8px;
	font-family: var(--inloff-font-serif);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--inloff-heart-light);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-paso__title {
	margin: 0 0 8px;
	font-family: var(--inloff-font-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	color: var(--inloff-on-navy);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-puntos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-puntos li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--inloff-ink-soft);
}

/* El <strong> heredaba 400 sobre un cuerpo de 300: no llegaba a leerse como
   énfasis. Con 600 y tinta plena, las palabras clave de cada punto se ven. */
body.inloff-pag-tarjeta-regalo .inloff-tr-puntos li strong {
	font-weight: 600;
	color: var(--inloff-ink);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-puntos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--inloff-heart);
}

/* La entradilla y la lista de puntos del héroe se tocaban a 0 px y se leían
   como un solo bloque. Van en dos bloques de texto distintos del constructor,
   así que el enganche es estructural: «la lista que viene detrás de una
   entradilla», esté donde esté. */
body.inloff-pag-tarjeta-regalo .inloff-tr .text:has(> .inloff-tr-lead) + .text:has(> .inloff-tr-puntos) {
	margin-top: 24px;
}

/* — El acordeón ------------------------------------------------------------- */

body.inloff-pag-tarjeta-regalo .inloff-tr-accordion .accordion-item {
	border-bottom: 1px solid var(--inloff-line-warm);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-accordion .accordion-title {
	padding: 18px 44px 18px 4px;
	font-family: var(--inloff-font-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--inloff-navy);
	background: transparent;
	border: 0;
}

/* El chevron se quedaba en 38 × 41 px, por debajo del objetivo táctil mínimo
   de 44 (WCAG 2.5.8). Crece sin moverse: sigue anclado al borde derecho. */
body.inloff-pag-tarjeta-regalo .inloff-tr-accordion .accordion-title .toggle {
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	opacity: 1;
	color: var(--inloff-bronze);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-accordion .accordion-inner {
	padding: 0 4px 20px;
}

/* — Piezas sueltas de la página ------------------------------------------- */

body.inloff-pag-tarjeta-regalo .inloff-tr-anchor {
	display: block;
	height: 0;
	scroll-margin-top: var(--inloff-header-offset, 96px);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-secthead {
	margin-left: auto;
	margin-right: auto;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-secthead .inloff-tr-lead {
	margin-left: auto;
	margin-right: auto;
}

/* La inclinación de la tarjeta de muestra ya no se pone aquí: la trae su
   propio balanceo, y dos rotaciones encadenadas descuadraban el eje del
   péndulo. */
body.inloff-pag-tarjeta-regalo .inloff-gc-muestra {
	transform: none;
}

body.inloff-pag-tarjeta-regalo .inloff-gc-muestra .inloff-gc-tarjeta {
	max-width: 480px;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-card {
	padding: 24px 22px;
	background: var(--inloff-surface);
	border: 1px solid var(--inloff-line-warm);
	border-radius: var(--inloff-radius);
	box-shadow: var(--inloff-shadow-card);
}

body.inloff-pag-tarjeta-regalo .inloff-tr-card__kicker {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--inloff-muted-warm);
}

body.inloff-pag-tarjeta-regalo .inloff-tr .button.inloff-tr-cta,
body.inloff-pag-tarjeta-regalo .inloff-tr .button.inloff-tr-cta:hover {
	/* El texto no quedaba centrado en vertical: el botón medía 54 px de alto
	   por `min-height` y el interlineado heredado era de 44,16, así que la
	   palabra se apoyaba arriba. Con flex el alto real deja de importar. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 22px 0 0;
	min-height: 54px;
	font-family: var(--inloff-font-sans);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--inloff-on-navy);
	background-color: var(--inloff-navy);
	border-color: var(--inloff-navy);
	box-shadow: none;
}

body.inloff-pag-tarjeta-regalo .inloff-tr .button.inloff-tr-cta:hover {
	background-color: var(--inloff-navy-deep);
	border-color: var(--inloff-navy-deep);
}

body.inloff-pag-tarjeta-regalo .inloff-tr .button.inloff-tr-cta:focus-visible {
	outline: 3px solid var(--inloff-bronze);
	outline-offset: 3px;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-faq__col > .col-inner {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

body.inloff-pag-tarjeta-regalo .inloff-tr-cierre p {
	margin: 24px auto 0;
	max-width: 29em;
	font-size: 0.9375rem;
	color: var(--inloff-muted-warm);
	text-align: center;
}

/* La letra pequeña del formulario iba a 100 caracteres en una sola línea. */
body.inloff-pag-tarjeta-regalo .inloff-gc-compra__legal {
	max-width: 30em;
	margin-inline: auto;
}

/* El botón de compra es el remate de la sección: tenía el mismo aire que hay
   entre dos campos cualquiera y no se leía como final. */
body.inloff-pag-tarjeta-regalo .inloff-gc-compra .inloff-gc-submit {
	margin-top: 16px;
}

@media (min-width: 850px) {
	body.inloff-pag-tarjeta-regalo {
		/* 113 px de header fijado + 16 de aire. */
		--inloff-header-offset: 129px;
	}

	body.inloff-pag-tarjeta-regalo .inloff-tr-lead {
		font-size: 1.1875rem;
	}
}

/* ============================================================================
   LA TINTA — el movimiento propio de esta página
   ----------------------------------------------------------------------------
   Aquí no hace falta otra animación de entrada: el escalonado estructural de
   `inloff-movimiento.css` ya da el ritmo de las cinco bandas, y la tarjeta de
   muestra del héroe ya tiene su péndulo de 11 s. Lo que faltaba está en el
   único sitio donde esta página es distinta de las otras cinco: es un
   CONFIGURADOR. Se pulsa algo a la izquierda y aparece algo a la derecha, y
   entre las dos cosas no había ningún hilo. Medido antes de esto: al elegir
   otro importe, el chip se rellenaba de navy y la cifra de la tarjeta cambiaba
   de golpe, los dos a la vez y sin relación aparente. Dos parpadeos
   simultáneos no se leen como causa y efecto; se leen como un fallo de
   repintado.

   La idea es una sola y es material, la misma que ya sostiene la tarjeta: es
   TINTA sobre cartón.

     1. El importe SE ACUÑA. El chip se hunde y sube (troquel), y en el mismo
        gesto la cifra de la tarjeta se hunde con él y vuelve a su sitio ya con
        el nuevo importe. El golpe se da en el formulario y la marca sale en la
        tarjeta.
     2. Lo que se escribe LLEGA como tinta que se posa: las dos líneas de la
        previsualización ya no aparecen de golpe, entran subiendo 5 px con el
        trazo enfocándose.
     3. Lo que se está escribiendo ESTÁ FRESCO: mientras un campo tiene el
        foco, la línea que ese campo alimenta se aviva en la tarjeta. Es lo que
        contesta, sin una sola línea de JavaScript, a «¿dónde sale esto que
        estoy escribiendo?».

   CÓMO SE DISPARA SIN JAVASCRIPT — y por qué así y no de otra forma

   El JS del formulario reescribe la cifra con `textContent`: el elemento es el
   mismo de siempre, así que una animación colgada de él NO se reinicia al
   cambiar el número. Por eso el acuñado NO va sobre el cambio de texto, va
   sobre el gesto: `:has(… .inloff-gc-chip:active)` deja la cifra hundida
   mientras el dedo aprieta y la suelta al levantarlo, que es exactamente
   cuando el JS ya ha escrito el importe nuevo. El efecto se ve mejor que si lo
   hubiéramos programado, y no hay ninguna lista de importes escrita en el CSS
   que se quede obsoleta el día que la tienda cambie los tramos: el enganche es
   estructural («cualquier chip que se esté pulsando»).

   Lo mismo con las dos líneas: el JS las tapa y destapa con `hidden`, y una
   animación arranca sola cuando un elemento pasa de no pintarse a pintarse.
   No hay que tocar `display` —que es justo lo que no se puede tocar aquí— ni
   añadir clases.

   REGLAS QUE SE RESPETAN AQUÍ
   - Nada nace oculto. Todas las animaciones son de un estado visible a otro
     visible (la tinta arranca en 0,16 de opacidad, no en 0) y ninguna lleva
     `fill-mode`: si no se ejecutan, el elemento se queda en su estado natural.
   - Ni un `transform` sobre `.inloff-gc-previa`. Esa columna es `sticky` y
     está exenta de la entrada común a propósito; un `transform` ahí la
     convertiría en bloque contenedor y dejaría de acompañar al formulario.
     Todo lo de abajo cuelga de piezas de DENTRO de la tarjeta.
   - Las curvas y los tiempos son los de la capa común, con su valor literal
     de reserva: esta misma hoja se usa también en la hoja de imprimir, donde
     `inloff-movimiento.css` no se encola y las variables no existen.
   ========================================================================= */

/* — 1. El importe se acuña ------------------------------------------------- */

/* El chip tenía 160 ms de `border-color` y `background-color` y nada más: al
   elegir otro importe no había ningún gesto, solo un cambio de color. */
.inloff-gc-chip {
	transition:
		border-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--inloff-mov-respuesta, 180ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* El mismo píxel de la capa común para `.button`: suficiente para que la mano
   lo note, no tanto como para que el ojo lo lea como un salto. Los chips no
   son `.button`, así que no lo heredaban. */
.inloff-gc-chip:hover {
	transform: translate3d(0, -1px, 0);
}

.inloff-gc-chip:active {
	transform: none;
	transition-duration: 80ms;
}

/* El troquel: entra hundido y con sombra interior (el cartón cediendo bajo el
   golpe) y sube a su sitio. Va como ANIMACIÓN y no como transición porque lo
   que cambia es la clase `.is-activo`, y hace falta que se ejecute entera cada
   vez que se elige un importe, no solo la primera. */
@keyframes inloff-gc-acunado {
	0% {
		transform: scale(0.948);
		box-shadow: inset 0 3px 8px rgba(6, 10, 20, 0.55);
	}
	100% {
		transform: scale(1);
		box-shadow: inset 0 0 0 0 rgba(6, 10, 20, 0);
	}
}

.inloff-gc-chip.is-activo {
	animation: inloff-gc-acunado 380ms var(--inloff-mov-decidida, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Y el golpe sale en la tarjeta. `transform-origin` a la izquierda: la cifra
   es enorme (hasta 48 px) y escalándola desde el centro se desplazaba también
   en horizontal, que se leía como un temblor. Anclada a su canto izquierdo
   —el mismo al que se alinea todo el texto de la tarjeta— solo se hunde. */
.inloff-gc-previa .inloff-gc-tarjeta__saldo {
	transform-origin: 0 50%;
	transition:
		transform 520ms var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1)),
		text-shadow 520ms var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1)),
		color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-gc-previa .inloff-gc-tarjeta__marco {
	transition: box-shadow 520ms var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1));
}

/* Bajada rápida (110 ms, mientras se aprieta) y subida larga (520 ms, al
   soltar). Es el reparto de cualquier objeto real: el golpe es instantáneo y
   lo que cuesta es volver. El grabado de la cifra se hunde a la vez —más
   sombra arriba, menos filo de luz abajo— y la tarjeta entera se acerca a su
   fondo: las tres sombras de distancia se acortan, como si alguien la
   apoyara para sellarla. */
.inloff-gc-compra:has(.inloff-gc-importes .inloff-gc-chip:active) .inloff-gc-previa .inloff-gc-tarjeta__saldo {
	transform: translate3d(0, 4px, 0) scale(0.94);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05),
		0 -1px 5px rgba(6, 10, 20, 0.66);
	transition-duration: 110ms;
}

.inloff-gc-compra:has(.inloff-gc-importes .inloff-gc-chip:active) .inloff-gc-previa .inloff-gc-tarjeta__marco {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(6, 10, 20, 0.55),
		0 0 0 1px rgba(10, 15, 30, 0.45),
		0 1px 3px rgba(15, 21, 38, 0.3),
		0 6px 13px rgba(15, 21, 38, 0.22),
		0 16px 34px rgba(15, 21, 38, 0.28);
	transition-duration: 110ms;
}

/* — 2. Lo que se escribe llega como tinta que se posa ---------------------- */

/* Arranca en 0,16 y no en 0: aunque algo saliera mal a mitad, nunca hay un
   fotograma con la línea invisible. El `blur` de 1,5 px es lo que convierte un
   fundido cualquiera en tinta calando en el papel; se va a 0 y no queda
   filtro aplicado. */
@keyframes inloff-gc-tinta {
	0% {
		opacity: 0.16;
		transform: translate3d(0, 5px, 0);
		filter: blur(1.5px);
	}
	100% {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/* Solo en la previsualización. La tarjeta de muestra del héroe nace con estas
   dos líneas escritas y visibles: allí la animación se dispararía en la carga
   y sería una entrada de más encima de la que ya trae la capa común.

   Y solo se dispara al APARECER la línea (cuando el JS le quita `hidden`), no
   en cada pulsación: repetirla en cada tecla convertiría escribir un mensaje
   en un parpadeo continuo. */
.inloff-gc-previa .inloff-gc-tarjeta__personas,
.inloff-gc-previa .inloff-gc-tarjeta__mensaje {
	animation: inloff-gc-tinta 560ms var(--inloff-mov-suave, cubic-bezier(0.25, 1, 0.5, 1));
	transition:
		color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		text-shadow var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

/* — 3. Lo que se está escribiendo está fresco ------------------------------ */

/* Mientras un campo tiene el foco, la línea que ese campo alimenta se aviva en
   la tarjeta: tinta plena y un halo cobre muy bajo, como si todavía brillara.
   Es la respuesta a la pregunta que se hace cualquiera delante de un
   configurador de seis campos —«¿y esto dónde sale?»— y se contesta sin una
   sola línea de JavaScript. Es cambio de color, no movimiento, así que se
   queda también con movimiento reducido: ahí es aún más útil.

   «De parte de» y «Para» alimentan la MISMA línea, por eso comparten destino.
   Nada baja de contraste: la línea no enfocada se queda como estaba. */
.inloff-gc-compra:has(#inloff_gc_importe:focus) .inloff-gc-previa .inloff-gc-tarjeta__saldo,
.inloff-gc-compra:has(input[name="inloff_gc_para"]:focus) .inloff-gc-previa .inloff-gc-tarjeta__personas,
.inloff-gc-compra:has(input[name="inloff_gc_de"]:focus) .inloff-gc-previa .inloff-gc-tarjeta__personas,
.inloff-gc-compra:has(textarea[name="inloff_gc_mensaje"]:focus) .inloff-gc-previa .inloff-gc-tarjeta__mensaje {
	color: #FFFDFA;
	text-shadow: 0 0 20px rgba(197, 161, 132, 0.4);
}

/* — Micro-respuestas del formulario --------------------------------------- */

/* Los campos cambiaban de borde de golpe y, al enfocarlos, Flatsome les metía
   además un halo gris de 5 px (`box-shadow: 0 0 5px #ccc`) que no es de esta
   casa y encima chocaba con el perfilado bronce del foco de teclado. Fuera el
   halo; el borde pasa a navy con el tiempo de la capa común. El indicador de
   foco accesible sigue siendo el `outline` bronce de más arriba.

   Nota: los campos de texto casan SIEMPRE con `:focus-visible`, también al
   pulsarlos con el ratón (así lo pide la especificación), de modo que la regla
   `:focus-visible { transition: none }` de la capa común deja este cambio
   instantáneo. Es el acuerdo de la casa —el foco aparece, no llega— y aquí se
   respeta: esto solo limpia el halo y fija el color.

   `input[type="number"]` va en la lista (revisión 2026-09-19). Es el campo «O el
   importe que quieras», y se había quedado fuera: al enfocarlo, su envoltorio
   `.inloff-gc-otro__campo` pasaba a navy y limpiaba su sombra, pero el input de
   dentro seguía con el halo gris de Flatsome. Medido en producción con la hoja
   puesta: `box-shadow: rgb(204,204,204) 0 0 5px` en el número frente a `none` en
   «Para» — un aro gris dentro de un marco navy, y justo en el único campo
   obligatorio del formulario. */
.inloff-gc-form input[type="text"],
.inloff-gc-form input[type="email"],
.inloff-gc-form input[type="date"],
.inloff-gc-form input[type="number"],
.inloff-gc-form textarea,
.inloff-gc-otro__campo {
	transition:
		border-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-gc-form input[type="text"]:focus,
.inloff-gc-form input[type="email"]:focus,
.inloff-gc-form input[type="date"]:focus,
.inloff-gc-form input[type="number"]:focus,
.inloff-gc-form textarea:focus,
.inloff-gc-otro__campo:has(input:focus) {
	border-color: var(--inloff-navy, #1B2540);
	box-shadow: none;
}

/* La opción de entrega marcada se levanta con anillo y sombra (ver más
   arriba), pero el salto era seco. Y sin hover no había forma de saber que la
   tarjeta entera era pulsable, solo el redondel. El hover se limita a la que
   NO está marcada: en la marcada pisaría su anillo navy. */
.inloff-gc-radio {
	transition:
		border-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-gc-radio:hover:not(:has(input:checked)) {
	border-color: var(--inloff-heart, #C5A184);
}

/* El contador se despierta. Estaba siempre en el mismo gris de ayuda, dijera
   0/300 o 297/300, así que no se miraba nunca. En cuanto hay algo escrito —o
   el campo tiene el foco— pasa a tinta navy: deja de ser decoración y empieza
   a ser un dato. */
.inloff-gc-form textarea + .inloff-gc-ayuda {
	transition: color var(--inloff-mov-estado, 300ms) var(--inloff-mov-firme, cubic-bezier(0.22, 1, 0.36, 1));
}

.inloff-gc-field:has(textarea:focus) textarea + .inloff-gc-ayuda,
.inloff-gc-field:has(textarea:not(:placeholder-shown)) textarea + .inloff-gc-ayuda {
	color: var(--inloff-navy, #1B2540);
}

/* El botón de compra sube 1 px con el hover de la capa común, pero su regla
   base le fija `box-shadow: none` incluso en `:hover` (ver el bloque del
   formulario), así que subía sin despegarse de nada. Con la sombra, el píxel
   se lee. Hace falta el `body.` de delante para ganarle a esa regla. */
body.inloff-pag-tarjeta-regalo .inloff-gc-compra .inloff-gc-submit:hover {
	box-shadow: 0 10px 26px rgba(27, 37, 64, 0.22);
}

/* — Quieto ----------------------------------------------------------------
   No es lo mismo más rápido: es sin movimiento y con todo visible. Los
   cambios de COLOR se quedan (el contador que despierta, la línea fresca de la
   tarjeta): quien pide menos movimiento no pide menos información.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.inloff-gc-chip,
	.inloff-gc-chip:hover,
	.inloff-gc-chip:active,
	.inloff-gc-chip.is-activo {
		animation: none;
		transform: none;
		transition: none;
	}

	.inloff-gc-previa .inloff-gc-tarjeta__saldo,
	.inloff-gc-previa .inloff-gc-tarjeta__personas,
	.inloff-gc-previa .inloff-gc-tarjeta__mensaje,
	.inloff-gc-previa .inloff-gc-tarjeta__marco,
	.inloff-gc-compra:has(.inloff-gc-importes .inloff-gc-chip:active) .inloff-gc-previa .inloff-gc-tarjeta__saldo,
	.inloff-gc-compra:has(.inloff-gc-importes .inloff-gc-chip:active) .inloff-gc-previa .inloff-gc-tarjeta__marco {
		animation: none;
		transform: none;
		opacity: 1;
		filter: none;
		transition: none;
	}

	.inloff-gc-form input[type="text"],
	.inloff-gc-form input[type="email"],
	.inloff-gc-form input[type="date"],
	.inloff-gc-form input[type="number"],
	.inloff-gc-form textarea,
	.inloff-gc-otro__campo,
	.inloff-gc-radio,
	.inloff-gc-form textarea + .inloff-gc-ayuda {
		transition: none;
	}

	body.inloff-pag-tarjeta-regalo .inloff-gc-compra .inloff-gc-submit:hover {
		box-shadow: none;
	}
}