/**
 * Wolk Suscripciones — Frontend público styles (Milestone B).
 *
 * Mobile-first. Sigue el patrón visual del Cobro Rápido (pay-datafono.css).
 * Variables CSS para colores, así el comercio puede customizar fácil.
 *
 * @package WolkLatamPayment
 * @since   1.5.0-alpha4
 */

/* ═════════════════════════════════════════════════════════════════════
 * Reset + variables
 * ═════════════════════════════════════════════════════════════════════ */
:root {
	--wlp-color-primary:        #2271b1;
	--wlp-color-primary-dark:   #135e96;
	--wlp-color-text:           #1f2937;
	--wlp-color-text-soft:      #6b7280;
	--wlp-color-text-muted:     #9ca3af;
	--wlp-color-bg:             #f9fafb;
	--wlp-color-card:           #ffffff;
	--wlp-color-border:         #e5e7eb;
	--wlp-color-border-strong:  #d1d5db;
	--wlp-color-success:        #059669;
	--wlp-color-success-bg:     #d1fae5;
	--wlp-color-warning:        #d97706;
	--wlp-color-warning-bg:     #fef3c7;
	--wlp-color-error:          #dc2626;
	--wlp-color-error-bg:       #fee2e2;
	--wlp-color-trial-bg:       #ecfeff;
	--wlp-color-trial-border:   #06b6d4;
	--wlp-radius-sm:            6px;
	--wlp-radius-md:            10px;
	--wlp-radius-lg:            16px;
	--wlp-shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.06);
	--wlp-shadow-md:            0 4px 12px rgba(0, 0, 0, 0.08);
	--wlp-shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.10);
	--wlp-input-height:         52px;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

/* ═════════════════════════════════════════════════════════════════════
 * Body standalone
 * ═════════════════════════════════════════════════════════════════════ */
body.wlp-subscribe-standalone {
	background: var( --wlp-color-bg );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var( --wlp-color-text );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

.wlp-subscribe-main {
	min-height: 100vh;
	padding: 16px 16px 100px; /* bottom padding por el sticky CTA en mobile */
	box-sizing: border-box;
}

.wlp-subscribe-container {
	max-width: 480px;
	margin: 0 auto;
}

/* ═════════════════════════════════════════════════════════════════════
 * Header — logo del comercio
 * ═════════════════════════════════════════════════════════════════════ */
.wlp-subscribe-header {
	text-align: center;
	padding: 8px 0 20px;
}
.wlp-subscribe-logo img,
.wlp-subscribe-logo .custom-logo {
	max-height: 56px;
	width: auto;
	max-width: 200px;
}
.wlp-subscribe-sitename {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	color: var( --wlp-color-text );
	text-decoration: none;
}

/* ═════════════════════════════════════════════════════════════════════
 * Hero del plan
 * ═════════════════════════════════════════════════════════════════════ */
.wlp-subscribe-hero {
	background: var( --wlp-color-card );
	border-radius: var( --wlp-radius-lg );
	padding: 24px;
	margin-bottom: 16px;
	box-shadow: var( --wlp-shadow-sm );
}

.wlp-subscribe-hero-image {
	border-radius: var( --wlp-radius-md );
	overflow: hidden;
	margin: -8px -8px 16px;
	background: var( --wlp-color-bg );
}
.wlp-subscribe-hero-image img {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
}

.wlp-subscribe-plan-name {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wlp-color-text );
}

.wlp-subscribe-price-block {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid var( --wlp-color-border );
	border-bottom: 1px solid var( --wlp-color-border );
	margin: 16px 0;
}
.wlp-subscribe-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.wlp-subscribe-price-amount {
	font-size: 26px;
	font-weight: 700;
	color: var( --wlp-color-primary );
	line-height: 1;
}
.wlp-subscribe-price-freq {
	font-size: 14px;
	color: var( --wlp-color-text-soft );
	font-weight: 500;
}
.wlp-subscribe-duration {
	font-size: 13px;
	color: var( --wlp-color-text-soft );
}

/* v1.9.54 — Stepper de CANTIDAD (+/-) en el hero (requerimiento 2026-08-19)
   v1.9.55 — Rediseño Deiby: CUADRITO aparte + hint discreto + precio por unidad */
.wlp-qty-box {
	flex-basis: 100%;
	background: var( --wlp-color-bg );
	border: 1px solid var( --wlp-color-border );
	border-radius: var( --wlp-radius-md );
	padding: 12px 14px;
	margin-top: 6px;
}
.wlp-qty-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wlp-qty-hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: var( --wlp-color-text-muted );
}
.wlp-qty-unit {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var( --wlp-color-text );
}
.wlp-qty-label {
	font-size: 13px;
	font-weight: 500;
	color: var( --wlp-color-text-soft );
	margin-right: 2px;
}
.wlp-qty-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --wlp-color-border-strong );
	background: var( --wlp-color-card );
	color: var( --wlp-color-text );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s, background 0.15s;
}
.wlp-qty-btn:hover:not(:disabled) {
	border-color: var( --wlp-color-primary );
	color: var( --wlp-color-primary );
}
.wlp-qty-btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.wlp-qty-valor {
	min-width: 26px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var( --wlp-color-text );
}

.wlp-subscribe-description {
	font-size: 14px;
	color: var( --wlp-color-text );
	line-height: 1.6;
}
.wlp-subscribe-description p {
	margin: 0 0 10px;
}
.wlp-subscribe-description p:last-child {
	margin-bottom: 0;
}

/* Trial banner */
.wlp-subscribe-trial-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var( --wlp-color-trial-bg );
	border-left: 4px solid var( --wlp-color-trial-border );
	border-radius: var( --wlp-radius-sm );
	padding: 12px 14px;
	margin: 16px 0 0;
	font-size: 13px;
}
.wlp-subscribe-trial-icon {
	font-size: 20px;
	flex-shrink: 0;
	line-height: 1;
}
.wlp-subscribe-trial-explain {
	margin-top: 4px;
	color: var( --wlp-color-text-soft );
	font-size: 12px;
}

/* Próximos cobros (collapsible) */
.wlp-subscribe-next-charges {
	margin-top: 16px;
	font-size: 13px;
}
.wlp-subscribe-next-charges summary {
	cursor: pointer;
	color: var( --wlp-color-primary );
	font-weight: 500;
	padding: 10px 0;
	user-select: none;
	border-radius: var( --wlp-radius-sm );
	transition: background 0.15s;
}
.wlp-subscribe-next-charges summary:hover {
	background: var( --wlp-color-bg );
	padding: 10px 8px;
}
.wlp-subscribe-next-charges summary::marker {
	color: var( --wlp-color-primary );
}
.wlp-subscribe-next-charges ul {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.wlp-subscribe-next-charges li {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var( --wlp-color-border );
	align-items: center;
}
.wlp-subscribe-next-charges li:last-child {
	border-bottom: none;
}
.wlp-charge-num {
	font-weight: 600;
	color: var( --wlp-color-text-soft );
	font-size: 12px;
}
.wlp-charge-date {
	color: var( --wlp-color-text );
}
.wlp-charge-amount {
	font-weight: 600;
	color: var( --wlp-color-primary );
}
.wlp-charges-note {
	margin: 8px 0 0;
	color: var( --wlp-color-text-muted );
	font-size: 12px;
	font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════════
 * Form
 * ═════════════════════════════════════════════════════════════════════ */
.wlp-subscribe-form {
	background: var( --wlp-color-card );
	border-radius: var( --wlp-radius-lg );
	padding: 24px;
	box-shadow: var( --wlp-shadow-sm );
}

.wlp-form-section {
	border: none;
	margin: 0 0 24px;
	padding: 0;
}
.wlp-form-section:last-child {
	margin-bottom: 0;
}
.wlp-form-section legend {
	font-size: 14px;
	font-weight: 600;
	color: var( --wlp-color-text );
	padding: 0 0 12px;
	margin-bottom: 4px;
	width: 100%;
	border-bottom: 1px solid var( --wlp-color-border );
}

.wlp-form-field {
	margin-bottom: 14px;
}
.wlp-form-field:last-child {
	margin-bottom: 0;
}
.wlp-form-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var( --wlp-color-text );
	margin-bottom: 6px;
}
.wlp-required {
	color: var( --wlp-color-error );
	margin-left: 2px;
}
.wlp-optional {
	color: var( --wlp-color-text-muted );
	font-weight: normal;
	margin-left: 4px;
}

.wlp-form-field input[type="text"],
.wlp-form-field input[type="email"],
.wlp-form-field input[type="tel"],
.wlp-form-field input[type="password"] {
	/* v1.9.11 FIX: password quedaba SIN estilo (inputs pelados del navegador
	   en la card "Tu cuenta") porque el selector no lo incluía. */
	width: 100%;
	height: var( --wlp-input-height );
	padding: 0 14px;
	font-size: 16px;     /* 16px previene zoom en iOS */
	line-height: 1.4;
	color: var( --wlp-color-text );
	background: var( --wlp-color-card );
	border: 1px solid var( --wlp-color-border-strong );
	border-radius: var( --wlp-radius-md );
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
}
.wlp-form-field input:focus {
	border-color: var( --wlp-color-primary );
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.15 );
}
.wlp-form-field input::placeholder {
	color: var( --wlp-color-text-muted );
}

/* Stripe Elements (montados como <div>) */
.wlp-stripe-field {
	width: 100%;
	min-height: var( --wlp-input-height );
	padding: 16px 14px;
	background: var( --wlp-color-card );
	border: 1px solid var( --wlp-color-border-strong );
	border-radius: var( --wlp-radius-md );
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wlp-stripe-field.StripeElement--focus {
	border-color: var( --wlp-color-primary );
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.15 );
}
.wlp-stripe-field.StripeElement--invalid {
	border-color: var( --wlp-color-error );
}

.wlp-form-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Errores inline */
.wlp-field-error {
	display: none;
	margin-top: 6px;
	color: var( --wlp-color-error );
	font-size: 12px;
	line-height: 1.4;
}
.wlp-field-error.is-visible {
	display: block;
}

/* Secure notice */
.wlp-secure-notice {
	margin-top: 12px;
	padding: 10px 12px;
	background: var( --wlp-color-bg );
	border-radius: var( --wlp-radius-sm );
	font-size: 12px;
	color: var( --wlp-color-text-soft );
	line-height: 1.5;
}

/* Honeypot oculto */
.wlp-hp-field {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* TOS checkbox */
.wlp-tos-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 8px 0;
	cursor: pointer;
	font-size: 13px;
	color: var( --wlp-color-text );
}
.wlp-tos-row input[type="checkbox"] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var( --wlp-color-primary );
}
.wlp-tos-row a {
	color: var( --wlp-color-primary );
	text-decoration: underline;
}
.wlp-tos-row a:hover {
	color: var( --wlp-color-primary-dark );
}

/* CTA principal */
.wlp-subscribe-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px;
	margin-top: 16px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var( --wlp-color-primary );
	border: none;
	border-radius: var( --wlp-radius-md );
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
	-webkit-tap-highlight-color: transparent;
	font-family: inherit;
}
.wlp-subscribe-cta:not(:disabled):hover {
	background: var( --wlp-color-primary-dark );
}
.wlp-subscribe-cta:not(:disabled):active {
	transform: translateY(1px);
}
.wlp-subscribe-cta:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.wlp-cta-loader {
	display: none;
	width: 20px;
	height: 20px;
}
.wlp-cta-loader svg {
	width: 100%;
	height: 100%;
	animation: wlp-spin 0.8s linear infinite;
}
.wlp-subscribe-cta.is-loading .wlp-cta-loader {
	display: inline-block;
}
@keyframes wlp-spin {
	to { transform: rotate(360deg); }
}

.wlp-subscribe-fineprint {
	margin: 12px 0 0;
	font-size: 12px;
	color: var( --wlp-color-text-muted );
	line-height: 1.5;
	text-align: center;
}

/* Error general */
.wlp-subscribe-error {
	display: none;
	margin-top: 12px;
	padding: 12px 14px;
	background: var( --wlp-color-error-bg );
	border-left: 4px solid var( --wlp-color-error );
	border-radius: var( --wlp-radius-sm );
	color: var( --wlp-color-error );
	font-size: 13px;
	line-height: 1.5;
}
.wlp-subscribe-error.is-visible {
	display: block;
}

/* ═════════════════════════════════════════════════════════════════════
 * Footer
 * ═════════════════════════════════════════════════════════════════════ */
.wlp-subscribe-footer {
	margin-top: 24px;
	text-align: center;
}
.wlp-trust-bar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px;
	font-size: 12px;
	color: var( --wlp-color-text-soft );
}
.wlp-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.wlp-trust-icon {
	font-size: 14px;
}
.wlp-subscribe-copyright {
	margin: 8px 0 0;
	font-size: 12px;
	color: var( --wlp-color-text-muted );
	padding: 0 16px 16px;
}

/* ═════════════════════════════════════════════════════════════════════
 * Success page
 * ═════════════════════════════════════════════════════════════════════ */
.wlp-subscribe-success-page {
	background: linear-gradient( 180deg, var( --wlp-color-bg ) 0%, #fff 100% );
}
.wlp-subscribe-success-container {
	padding: 16px 0;
}

.wlp-success-hero {
	text-align: center;
	padding: 24px 16px 16px;
}

/* Animación de check (SVG) */
.wlp-success-check {
	display: inline-block;
	margin-bottom: 16px;
}
.wlp-success-check-svg {
	width: 80px;
	height: 80px;
}
.wlp-success-check-circle {
	stroke: var( --wlp-color-success );
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: wlp-stroke-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.wlp-success-check-mark {
	stroke: var( --wlp-color-success );
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: wlp-stroke-mark 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes wlp-stroke-circle {
	to { stroke-dashoffset: 0; }
}
@keyframes wlp-stroke-mark {
	to { stroke-dashoffset: 0; }
}

.wlp-success-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var( --wlp-color-text );
}
.wlp-success-subtitle {
	margin: 0 0 24px;
	font-size: 15px;
	color: var( --wlp-color-text-soft );
}

.wlp-success-card {
	background: var( --wlp-color-card );
	border-radius: var( --wlp-radius-lg );
	padding: 8px 0;
	margin: 0 16px 16px;
	box-shadow: var( --wlp-shadow-sm );
}

.wlp-success-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var( --wlp-color-border );
	font-size: 14px;
}
.wlp-success-row:last-child {
	border-bottom: none;
}
.wlp-success-row-label {
	color: var( --wlp-color-text-soft );
}
.wlp-success-row-value {
	color: var( --wlp-color-text );
	font-weight: 500;
	text-align: right;
}
.wlp-success-row-value small {
	display: block;
	font-weight: normal;
	color: var( --wlp-color-text-soft );
	font-size: 12px;
	margin-top: 2px;
}
.wlp-success-row-highlight {
	background: var( --wlp-color-trial-bg );
}
.wlp-success-row-highlight .wlp-success-row-label,
.wlp-success-row-highlight .wlp-success-row-value {
	color: var( --wlp-color-primary-dark );
	font-weight: 600;
}
.wlp-success-generic {
	padding: 20px;
	color: var( --wlp-color-text );
	font-size: 14px;
	text-align: center;
}

.wlp-success-message {
	margin: 0 16px 16px;
	padding: 16px 20px;
	background: var( --wlp-color-bg );
	border-radius: var( --wlp-radius-md );
	font-size: 13px;
	color: var( --wlp-color-text );
	line-height: 1.6;
}
.wlp-success-message p {
	margin: 0 0 8px;
}
.wlp-success-message p:last-child {
	margin-bottom: 0;
}
.wlp-success-cancel-info {
	color: var( --wlp-color-text-soft );
	font-size: 12px !important;
}

.wlp-success-actions {
	text-align: center;
	margin: 24px 0 16px;
}
.wlp-success-back {
	display: inline-block;
	padding: 12px 24px;
	background: var( --wlp-color-card );
	border: 1px solid var( --wlp-color-border-strong );
	border-radius: var( --wlp-radius-md );
	color: var( --wlp-color-text );
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: background 0.15s, border-color 0.15s;
}
.wlp-success-back:hover {
	background: var( --wlp-color-bg );
	border-color: var( --wlp-color-primary );
	color: var( --wlp-color-primary );
}

/* ═════════════════════════════════════════════════════════════════════
 * Responsive — tablet+
 * ═════════════════════════════════════════════════════════════════════ */
@media ( min-width: 600px ) {
	.wlp-subscribe-main {
		padding: 32px 16px;
	}
	.wlp-subscribe-hero,
	.wlp-subscribe-form {
		padding: 32px;
	}
	.wlp-subscribe-plan-name {
		font-size: 26px;
	}
	.wlp-subscribe-price-amount {
		font-size: 32px;
	}
	.wlp-success-title {
		font-size: 28px;
	}
}

/* ═════════════════════════════════════════════════════════════════════
 * Reducción de motion (a11y)
 * ═════════════════════════════════════════════════════════════════════ */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.wlp-success-check-circle,
	.wlp-success-check-mark {
		stroke-dashoffset: 0 !important;
	}
}

/* ═════════════════════════════════════════════════════════════════════
 * Dark mode (preferencia del usuario)
 * ═════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   v1.9.2 — Guía de pasos flotante (solo móvil)
   Patrón visual de la píldora del checkout del tema (Datos | Pedido | Pago):
   blanca, redondeada, sombra suave, paso activo con círculo en el color
   primario. Desaparece en pantallas ≥600px (el desktop no la necesita).
   ═══════════════════════════════════════════════════════════════════════ */
#wlp-sec-plan,
#wlp-sec-datos,
#wlp-sec-pago {
	scroll-margin-top: 14px; /* aire al anclar con la guía */
}

.wlp-steps-nav {
	position: fixed;
	left: 50%;
	transform: translateX( -50% );
	bottom: 16px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 4px;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.18 );
	padding: 8px 12px;
}

.wlp-steps-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-decoration: none;
	color: #50575e;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 12px;
	border-radius: 999px;
	-webkit-tap-highlight-color: transparent;
}

.wlp-steps-nav .wlp-step-ico {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	background: #f0f0f1;
	transition: background 0.2s ease, transform 0.2s ease;
}

.wlp-steps-nav a.is-active {
	color: var( --wlp-color-primary, #2271b1 );
}

.wlp-steps-nav a.is-active .wlp-step-ico {
	background: var( --wlp-color-primary, #2271b1 );
	transform: scale( 1.06 );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.22 );
}

@media ( min-width: 600px ) {
	.wlp-steps-nav {
		display: none;
	}
}



/* ═══════════════════════════════════════════════════════════════════════
   v1.9.3 — Audio de bienvenida (carita + reproductor DISCRETO)
   ═══════════════════════════════════════════════════════════════════════ */
.wlp-audio-guide {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #e8e8e8;
	border-radius: 999px;
	padding: 8px 16px 8px 8px;
	margin: 0 0 16px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.06 );
}

.wlp-audio-face {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: var( --wlp-color-primary, #2271b1 );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}

.wlp-audio-emoji {
	font-size: 22px;
	line-height: 1;
}

.wlp-audio-state {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	font-size: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1d2327;
}

/* Pulso de invitación mientras el autoplay está bloqueado */
.wlp-audio-face.is-pending {
	animation: wlpAudioPulse 1.8s ease-in-out infinite;
}
@keyframes wlpAudioPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 34, 113, 177, 0.35 ); }
	50%      { box-shadow: 0 0 0 10px rgba( 34, 113, 177, 0 ); }
}

.wlp-audio-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.wlp-audio-info strong {
	font-size: 13px;
	color: #1d2327;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wlp-audio-sub {
	font-size: 11px;
	color: #787c82;
}

/* Barras de "hablando" (solo se mueven con .is-playing) */
.wlp-audio-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 18px;
	flex-shrink: 0;
}
.wlp-audio-bars i {
	width: 3px;
	height: 5px;
	border-radius: 2px;
	background: var( --wlp-color-primary, #2271b1 );
	opacity: 0.35;
}
.wlp-audio-guide.is-playing .wlp-audio-bars i {
	opacity: 1;
	animation: wlpAudioBar 0.9s ease-in-out infinite;
}
.wlp-audio-guide.is-playing .wlp-audio-bars i:nth-child(2) { animation-delay: 0.15s; }
.wlp-audio-guide.is-playing .wlp-audio-bars i:nth-child(3) { animation-delay: 0.3s; }
.wlp-audio-guide.is-playing .wlp-audio-bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes wlpAudioBar {
	0%, 100% { height: 5px; }
	50%      { height: 16px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wlp-audio-face.is-pending,
	.wlp-audio-guide.is-playing .wlp-audio-bars i {
		animation: none;
	}
}



/* ═══════════════════════════════════════════════════════════════════════
   v1.9.4 — Sección fiscal embebida (MISMO wizard del checkout normal)
   ═══════════════════════════════════════════════════════════════════════ */
#wlp-sec-fiscal {
	scroll-margin-top: 14px;
}

.wlp-fiscal-section {
	background: #ffffff;
	border: 1px solid #e8e8e8;
	border-radius: 16px;
	padding: 18px 16px;
	margin: 0 0 16px;
}

.wlp-fiscal-notice {
	display: flex;
	gap: 10px;
	background: #fbf7ee;
	border-left: 4px solid #b08d3a;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 14px;
}
.wlp-fiscal-notice-ico { font-size: 20px; }
.wlp-fiscal-notice strong { font-size: 14px; display: block; margin-bottom: 2px; }
.wlp-fiscal-notice p { margin: 0; font-size: 13px; color: #50575e; line-height: 1.45; }

.wlp-fiscal-title {
	font-size: 17px;
	margin: 0 0 12px;
}

/* El wizard trae Tailwind: contener anchos dentro de nuestra tarjeta */
.wlp-fiscal-section .wolk-app-container,
.wlp-fiscal-section .wolk-perfil-registro {
	max-width: 100% !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   v1.9.5 — Selector de país en el HERO (un solo selector en toda la página)
   ═══════════════════════════════════════════════════════════════════════ */
.wlp-hero-pais {
	margin: 14px 0 4px;
	text-align: left;
}
.wlp-hero-pais label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
	margin-bottom: 6px;
}
.wlp-hero-pais select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #ffffff;
	font-size: 15px;
	color: #1d2327;
}
.wlp-hero-pais select:focus {
	outline: none;
	border-color: var( --wlp-color-primary, #2271b1 );
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.12 );
}



/* ═══════════════════════════════════════════════════════════════════════
   v1.9.8 — Card "Tu cuenta" correo-primero + label de descripción
   ═══════════════════════════════════════════════════════════════════════ */
.wlp-description-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #787c82;
	margin-bottom: 6px;
}

.wlp-account-copy {
	font-size: 14px;
	color: #50575e;
	margin: 0 0 14px;
	line-height: 1.5;
}

.wlp-acct-cta {
	margin-top: 4px;
}

.wlp-acct-msg {
	margin-top: 10px;
	font-size: 13px;
	min-height: 18px;
}
.wlp-acct-msg.es-ok    { color: #0e5e4d; }
.wlp-acct-msg.es-error { color: #d63638; }

.wlp-account-hint {
	margin: 12px 0 0;
	font-size: 12px;
	color: #787c82;
}

.wlp-account-note {
	border-left: 4px solid var( --wlp-color-primary, #2271b1 );
	background: #f0f7f5;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13px;
	color: #1d2327;
	margin: 0 0 16px;
}



/* ═══════════════════════════════════════════════════════════════════════
   v1.9.10 — Pie de confianza: marcas de tarjetas + Stripe + legal
   ═══════════════════════════════════════════════════════════════════════ */
.wlp-trust-brands {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 14px 0 10px;
	flex-wrap: wrap;
}
.wlp-brand-card svg {
	display: block;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.08 ) );
}
.wlp-powered-stripe {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.wlp-powered-stripe svg { display: block; }
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
}
.wlp-subscribe-legal {
	text-align: center;
	font-size: 12px;
	color: #787c82;
	line-height: 1.6;
	margin: 0;
}
.wlp-subscribe-legal a {
	color: #50575e;
	text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.9.12 — Card "Tu cuenta" autovalidada (banner + ojito + checklist)
   ═══════════════════════════════════════════════════════════════════════ */
.wlp-acct-banner {
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 14px;
}
.wlp-acct-banner.es-info {
	background: #d9f2ec;
	color: #0e5e4d;
}
.wlp-acct-banner.es-error {
	background: #fdeeee;
	color: #d63638;
}

.wlp-pass-shell {
	position: relative;
}
.wlp-pass-shell input {
	padding-right: 46px !important;
}
.wlp-pass-eye {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY( -50% );
	border: none;
	background: transparent;
	font-size: 17px;
	cursor: pointer;
	padding: 8px;
	opacity: 0.55;
	line-height: 1;
}
.wlp-pass-eye.es-visible { opacity: 1; }

.wlp-acct-reqs {
	list-style: none;
	margin: 10px 0 4px;
	padding: 0;
}
.wlp-acct-reqs li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #787c82;
	padding: 3px 0;
}
.wlp-req-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #dcdcde;
	flex-shrink: 0;
	position: relative;
	transition: all 0.15s ease;
}
.wlp-acct-reqs li.es-ok { color: #0e5e4d; }
.wlp-acct-reqs li.es-ok .wlp-req-dot {
	background: var( --wlp-color-primary, #0e5e4d );
	border-color: var( --wlp-color-primary, #0e5e4d );
}
.wlp-acct-reqs li.es-ok .wlp-req-dot::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.wlp-acct-cta:disabled {
	opacity: 0.5;
	cursor: default;
}

.wlp-acct-forgot {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: #50575e;
	text-decoration: underline;
}



/* v1.9.13 — Banners ámbar (contraseña incorrecta) y verde fuerte (reset enviado) */
.wlp-acct-banner.es-warn {
	background: #fdf3d7;
	color: #8a6100;
}
.wlp-acct-banner.es-ok {
	background: #d9f2ec;
	color: #0e5e4d;
}

/* ── v1.9.22 — Audio guide: toda la barra clickeable + X + flotante móvil ── */
.wlp-audio-guide {
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
.wlp-audio-guide.is-closed {
	display: none !important;
}
.wlp-audio-close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid #d1d5db;
	background: #ffffff;
	color: #6b7280;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	padding: 0;
	z-index: 2;
}
.wlp-audio-close:hover {
	color: #1f2937;
	border-color: #9ca3af;
}

/* v1.9.24 — Móvil: flotante ARRIBA y FINO (decisión Deiby: abajo tapaba
   los controles). v1.9.50 — STICKY como en Mi suscripción (Deiby: "quedó
   super... en móvil el comportamiento"): arranca en su lugar debajo del
   logo y SOLO al scrollear se pega arriba y flota. La sombra fuerte y el
   blur llegan con .is-floating (cuando despegó); en reposo sombra suave. */
@media (max-width: 640px) {
	.wlp-audio-guide {
		position: sticky;
		top: calc( 8px + var( --wp-admin--admin-bar--height, 0px ) );
		z-index: 9990;
		margin: 0 0 14px;
		gap: 8px;
		padding: 6px 34px 6px 6px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	}
	.wlp-audio-guide.is-floating {
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
		backdrop-filter: blur(6px);
		background: rgba(255, 255, 255, 0.96);
	}
	.wlp-audio-guide .wlp-audio-face {
		width: 34px;
		height: 34px;
	}
	.wlp-audio-guide .wlp-audio-emoji {
		font-size: 17px;
	}
	.wlp-audio-guide .wlp-audio-info strong {
		font-size: 12px;
	}
	.wlp-audio-guide .wlp-audio-sub {
		font-size: 10px;
	}
	.wlp-audio-guide .wlp-audio-bars {
		height: 14px;
	}
	.wlp-audio-close {
		top: 50%;
		right: 6px;
		transform: translateY(-50%);
		width: 22px;
		height: 22px;
		font-size: 14px;
		border: none;
		box-shadow: none;
		background: transparent;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.9.56 — Selector de método de pago: Tarjeta / Transferencia-SINPE
   ═══════════════════════════════════════════════════════════════════════ */
.wlp-metodo-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 16px;
}
@media (max-width: 480px) {
	.wlp-metodo-toggle { grid-template-columns: 1fr; }
}
.wlp-metodo-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 2px solid #d7dbee;
	border-radius: 12px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wlp-metodo-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.wlp-metodo-card.is-active {
	border-color: #1e2749;
	box-shadow: 0 0 0 3px rgba(30, 39, 73, 0.12);
}
.wlp-metodo-card:focus-within {
	outline: 2px solid #1e2749;
	outline-offset: 2px;
}
.wlp-metodo-ico { font-size: 20px; line-height: 1; }
.wlp-metodo-tit { font-weight: 800; font-size: 14px; color: #14183a; }
.wlp-metodo-sub { font-size: 12px; color: #64708a; line-height: 1.35; }

/* Con transferencia elegida: se ocultan los campos de tarjeta y su aviso. */
#wlp-sec-pago.es-transferencia .wlp-solo-tarjeta { display: none; }

.wlp-sinpe-info {
	background: #eef1ff;
	border: 1.5px solid #c7cef5;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13px;
	color: #33395c;
	line-height: 1.5;
}
.wlp-sinpe-info p { margin: 0 0 8px; }
.wlp-sinpe-info p:last-child { margin-bottom: 0; }
.wlp-sinpe-info .wlp-sinpe-horario { color: #64708a; font-size: 12.5px; }

/* v1.9.57 — Con transferencia elegida, los sellos exclusivos de tarjeta
   (3D Secure / Stripe) se ocultan; el de conexión SSL aplica siempre. */
body.wlp-modo-transferencia .wlp-trust-item.wlp-trust-tarjeta { display: none; }

/* v1.9.58 — Caja de transferencia todo-en-uno: cuentas + comprobante. */
.wlp-sinpe-paso { margin: 0 0 8px; }
.wlp-sinpe-cuentas { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.wlp-sinpe-cuentas li { background: #ffffff; border: 1px solid #d7dbee; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.wlp-sinpe-cuentas li strong { display: block; color: #14183a; }
.wlp-sinpe-cta-det { display: block; color: #33395c; }
.wlp-sinpe-cta-tit { display: block; color: #64708a; font-size: 12px; }
#wlp-sinpe-file { display: block; width: 100%; margin: 0 0 12px; padding: 10px; border: 1.5px dashed #a9b3e0; border-radius: 10px; background: #ffffff; font-size: 13px; }

/* v1.9.59 — PROCESANDO = TODO BLOQUEADO (decisión Deiby: al dar clic nada
   queda "a la libre"). El JS pone `inert` en .wlp-subscribe-main (bloquea
   mouse y teclado); esto es el respaldo visual + pointer-events para
   navegadores sin inert. El modal 3DS de Stripe vive en <body>, fuera del
   main, así que no se ve afectado. */
body.wlp-procesando { cursor: progress; }
body.wlp-procesando .wlp-subscribe-main { pointer-events: none; }
body.wlp-procesando #wlp-sec-plan,
body.wlp-procesando #wlp-sec-fiscal,
body.wlp-procesando #wlp-sec-pago .wlp-metodo-toggle,
body.wlp-procesando #wlp-sec-pago .wlp-solo-tarjeta,
body.wlp-procesando #wlp-sec-pago .wlp-sinpe-info {
	opacity: 0.55;
	filter: grayscale(0.3);
	transition: opacity 0.25s ease;
}

/* v1.9.60 — Estado del escaneo del comprobante (OCR en el navegador). */
.wlp-sinpe-scan { display: none; margin: -6px 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
.wlp-sinpe-scan.es-leyendo { display: block; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.wlp-sinpe-scan.es-ok      { display: block; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.wlp-sinpe-scan.es-malo    { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wlp-sinpe-scan.es-aviso   { display: block; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* v1.9.61 — Equivalente en colones al TC oficial (caja de transferencia). */
.wlp-sinpe-crc { color: #0f766e; font-weight: 700; white-space: nowrap; }

/* v1.9.64 — Modal "falta tu comprobante" (tipo Uber: limpio, con ícono).
   Diálogo centrado en desktop; bottom-sheet en móvil. */
.wlp-sinpe-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 18, 35, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
	padding: 20px;
}
.wlp-sinpe-modal-backdrop.es-visible {
	opacity: 1;
	pointer-events: auto;
}
.wlp-sinpe-modal {
	background: #ffffff;
	border-radius: 20px;
	max-width: 380px;
	width: 100%;
	padding: 30px 26px 22px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(15, 18, 35, 0.25);
	transform: translateY(14px) scale(0.97);
	transition: transform 0.22s ease;
}
.wlp-sinpe-modal-backdrop.es-visible .wlp-sinpe-modal {
	transform: translateY(0) scale(1);
}
.wlp-sinpe-modal-icono {
	width: 60px;
	height: 60px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #eef2ff;
	color: #3b47a3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wlp-sinpe-modal-titulo {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
	color: #14183a;
}
.wlp-sinpe-modal-texto {
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #4b5478;
}
.wlp-sinpe-modal-cta {
	display: block;
	width: 100%;
	border: none;
	border-radius: 12px;
	background: #1e2749;
	color: #ffffff;
	font-weight: 800;
	font-size: 14.5px;
	padding: 14px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
}
.wlp-sinpe-modal-cta:hover { background: #2a3660; }
.wlp-sinpe-modal-cerrar {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
	color: #64708a;
	font-weight: 700;
	font-size: 13px;
	padding: 12px 0 2px;
	cursor: pointer;
	font-family: inherit;
}
.wlp-sinpe-modal-cerrar:hover { color: #14183a; }
@media (max-width: 560px) {
	.wlp-sinpe-modal-backdrop { align-items: flex-end; padding: 0; }
	.wlp-sinpe-modal {
		max-width: 100%;
		border-radius: 20px 20px 0 0;
		padding-bottom: calc(22px + env(safe-area-inset-bottom));
		transform: translateY(100%);
	}
	.wlp-sinpe-modal-backdrop.es-visible .wlp-sinpe-modal { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-sinpe-modal-backdrop, .wlp-sinpe-modal { transition: none; }
}

/* v1.9.66 — Tablita del veredicto del comprobante (simple y visual). */
.wlp-sinpe-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wlp-sinpe-tabla td { padding: 5px 0; border-bottom: 1px dashed rgba(100, 112, 138, 0.25); }
.wlp-sinpe-tabla tr:last-child td { border-bottom: none; }
.wlp-sinpe-tabla td:first-child { color: inherit; opacity: 0.75; }
.wlp-sinpe-tabla td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.wlp-sinpe-tabla tr.es-completo td:last-child { color: #065f46; }
.wlp-sinpe-tabla tr.es-pendiente td { border-top: 2px solid rgba(180, 83, 9, 0.35); padding-top: 7px; }
.wlp-sinpe-tabla tr.es-pendiente td:last-child { color: #92400e; font-size: 13.5px; }
.wlp-sinpe-tabla-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.5; opacity: 0.9; }

/* v1.9.67 — Formato estándar ₡ · $ en la tablita: el USD acompaña más suave. */
.wlp-sinpe-tabla-usd { font-weight: 600; opacity: 0.7; font-size: 11.5px; }

/* v1.9.71 — Múltiples comprobantes: nombre, quitar (×) y botón "cargar otro". */
.wlp-sinpe-tabla-nombre { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: 11px; opacity: 0.6; }
.wlp-sinpe-quitar { border: none; background: rgba(100, 112, 138, 0.14); color: #64708a; border-radius: 50%; width: 20px; height: 20px; line-height: 1; font-size: 13px; font-weight: 800; cursor: pointer; padding: 0; margin-left: 4px; vertical-align: middle; }
.wlp-sinpe-quitar:hover { background: #fee2e2; color: #b91c1c; }
.wlp-sinpe-agregar { display: block; width: 100%; margin-top: 10px; border: 1.5px dashed #d97706; border-radius: 10px; background: #fffbeb; color: #92400e; font-weight: 800; font-size: 13.5px; padding: 12px; cursor: pointer; font-family: inherit; transition: background 0.15s ease; }
.wlp-sinpe-agregar:hover { background: #fef3c7; }
.wlp-sinpe-agregar-falta { font-weight: 700; opacity: 0.85; }

/* v1.9.72 — FIX desborde en móvil (cazado por Deiby con 4 comprobantes): la
   columna de valores tenía nowrap (pensado para montos) y la fila "no parece
   comprobante" lleva TEXTO largo que no podía partirse → la tabla reventaba
   el ancho. Ahora: layout fijo, el texto envuelve, y solo la pareja "· $ USD"
   se mantiene indivisible como unidad. */
.wlp-sinpe-tabla { table-layout: fixed; }
.wlp-sinpe-tabla td:first-child { width: 44%; overflow-wrap: anywhere; }
.wlp-sinpe-tabla td:last-child { white-space: normal; overflow-wrap: anywhere; }
.wlp-sinpe-tabla-usd { white-space: nowrap; }
.wlp-sinpe-scan { overflow-wrap: anywhere; }

/* ================================================================
   v1.9.73 — UX (decisión Deiby)
   ================================================================ */

/* BLOQUE DE MONTO ordenado: local grandote (lo que van a transferir),
   USD al lado como referencia, TC e IVA en sus propias líneas. */
.wlp-sinpe-monto-box { background: #ffffff; border: 1px solid #d7dbee; border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; }
.wlp-sinpe-monto-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #64708a; }
.wlp-sinpe-monto-linea { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 3px 0 7px; }
.wlp-sinpe-monto-crc { font-size: 22px; font-weight: 800; color: #14183a; letter-spacing: -0.01em; }
.wlp-sinpe-monto-usd { font-size: 13.5px; font-weight: 700; color: #64708a; }
.wlp-sinpe-monto-box.sin-local .wlp-sinpe-monto-usd { font-size: 22px; color: #14183a; }
.wlp-sinpe-tc { margin: 0 0 3px; font-size: 12px; color: #64708a; line-height: 1.5; }
.wlp-sinpe-tc:last-child { margin-bottom: 0; }

/* PSICOLOGÍA: al elegir SINPE, la card de Tarjeta palpita MUY leve, un
   brillito metálico la recorre y "se activa al instante" se enciende.
   Corre 2 veces y se apaga (el JS quita la clase). */
@keyframes wlp-nudge-palpito {
	0%, 100% { transform: scale(1); }
	30%      { transform: scale(1.018); }
	60%      { transform: scale(0.996); }
}
@keyframes wlp-nudge-brillo {
	from { transform: translateX(-130%) skewX(-18deg); }
	to   { transform: translateX(320%) skewX(-18deg); }
}
.wlp-metodo-card { position: relative; overflow: hidden; }
.wlp-metodo-card.wlp-nudge {
	animation: wlp-nudge-palpito 1.7s ease-in-out 2;
	border-color: #8fa0e8;
	box-shadow: 0 4px 16px rgba(30, 39, 73, 0.12);
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.wlp-metodo-card.wlp-nudge::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	transform: translateX(-130%) skewX(-18deg);
	background: linear-gradient(105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.65) 42%,
		rgba(196, 205, 250, 0.45) 55%,
		transparent 100%);
	animation: wlp-nudge-brillo 1.5s ease-in-out 0.25s 2;
	pointer-events: none;
}
.wlp-metodo-card.wlp-nudge .wlp-metodo-sub {
	color: #0f766e;
	font-weight: 800;
	transition: color 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
	.wlp-metodo-card.wlp-nudge,
	.wlp-metodo-card.wlp-nudge::after { animation: none; }
}

/* v1.9.74 — Modal de verificación (lupa palpitando) + bocina parlante. */
@keyframes wlp-lupa-pulso {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	50%      { transform: scale(1.12) rotate(-8deg); opacity: 0.85; }
}
.wlp-sinpe-modal-icono.es-lupa { color: #3b47a3; }
.wlp-sinpe-modal-icono.es-lupa svg { animation: wlp-lupa-pulso 1.1s ease-in-out infinite; }
@keyframes wlp-bocina-palpito {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}
.wlp-sinpe-bocina {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 10px auto 0;
	border: 1.5px solid #c7cef5;
	border-radius: 50%;
	background: #ffffff;
	font-size: 19px;
	cursor: pointer;
	animation: wlp-bocina-palpito 1.6s ease-in-out infinite;
	box-shadow: 0 2px 8px rgba(30, 39, 73, 0.10);
}
.wlp-sinpe-bocina:hover { background: #eef2ff; }
.wlp-sinpe-scan .wlp-sinpe-bocina { display: flex; }
@media (prefers-reduced-motion: reduce) {
	.wlp-sinpe-modal-icono.es-lupa svg, .wlp-sinpe-bocina { animation: none; }
}

/* v1.9.76 — La bocina con ícono PROPIO (SVG): igual en todo aparato (el emoji
   lo pintaba cada sistema con su fuente; en Android salía monocromo). */
.wlp-sinpe-bocina:active { transform: scale(0.94); }
.wlp-sinpe-voz-modal .wlp-sinpe-modal-icono { font-size: 30px; }
.wlp-sinpe-voz-modal .wlp-sinpe-modal-texto { font-size: 15px; line-height: 1.55; }

/* ================================================================
   Interruptor de voz + ayuda para activarla (núcleo 1.1.0).
   ================================================================ */

/* Ayuda dentro del modal cuando el aparato no tiene voz. */
.wolk-voz-ayuda { margin: 4px 0 16px; padding: 14px 14px 10px; background: #f6f7fb; border: 1px solid #e3e6f2; border-radius: 12px; text-align: left; }
.wolk-voz-ayuda-tit { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: #14183a; }
.wolk-voz-ayuda-sub { margin: 0 0 10px; font-size: 12.5px; color: #64708a; line-height: 1.5; }
.wolk-voz-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wolk-voz-probar, .wolk-voz-ajustes { border: none; border-radius: 10px; font-weight: 800; font-size: 13px; padding: 11px 14px; cursor: pointer; font-family: inherit; flex: 1 1 auto; }
.wolk-voz-probar { background: #1e2749; color: #fff; }
.wolk-voz-ajustes { background: #fff; color: #1e2749; border: 1.5px solid #c7cef5; }
.wolk-voz-aviso { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; }
.wolk-voz-aviso.es-ok { color: #0f766e; }
.wolk-voz-aviso.es-no { color: #b45309; }
.wolk-voz-pasos { margin: 0; padding-left: 20px; font-size: 12.5px; color: #33395c; line-height: 1.65; }
.wolk-voz-pasos li { margin-bottom: 3px; }

/* 0.72.2 — MONTO del modal de voz: aparte y formateado (pedido Deiby: "no
   todo seguido"). Local grande y en negrita; USD debajo, discreto. */
.wolk-voz-monto {
	display: block;
	margin: 10px 0 4px;
	padding: 12px 14px;
	border: 1px solid #d9def0;
	border-radius: 12px;
	background: linear-gradient( 180deg, #f7f9ff 0%, #eef2ff 100% );
	text-align: center;
}
.wolk-voz-monto-label {
	display: block;
	margin: 0 0 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b7398;
}
.wolk-voz-monto-loc {
	display: block;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 800;
	color: #14183a;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}
.wolk-voz-monto-usd {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: #6b7398;
	font-variant-numeric: tabular-nums;
}
@media ( max-width: 400px ) {
	.wolk-voz-monto-loc { font-size: 22px; }
}


/* 0.74.0 — LA BOCINA, UN SOLO ÍCONO EN TODAS LAS PANTALLAS.
   El emoji lo pone el CSS, NO el HTML: cuando va como texto, el script de
   emojis de WordPress (wp-emoji-release.min.js) lo reemplaza por su imagen
   de Twemoji y el ícono termina viéndose distinto en cada pantalla — eso
   era el "ícono feo". Como contenido de CSS, ese script ni lo ve. */
.wlp-sinpe-bocina::before {
	content: '\1F50A';
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
	line-height: 1;
}
/* Por si alguna otra parte del sitio ya metió la imagen dentro del botón. */
.wlp-sinpe-bocina img.emoji { display: none !important; }

/* 0.74.0 — El interruptor "Leer en voz alta" se quitó (pedido Deiby: en la
   pantalla del pedido la bolita quedaba encima del texto y ensuciaba el
   bloque). Se dejan sin estilo a propósito: si quedara markup viejo en
   caché, no pinta nada raro. */
.wolk-voz-grupo { display: contents; }

/* 0.75.0 — Mientras suena el audio grabado, la bocina del modal palpita: el
   cliente entiende que ESO que está oyendo explica el monto que ve abajo.
   (El audio es uno solo para todos, así que no puede decir un monto que
   cambia en cada pedido — por eso el monto va en pantalla.) */
.wolk-sinpe-voz-modal.es-sonando .wlp-sinpe-modal-icono {
	animation: wolk-voz-palpito 1.15s ease-in-out infinite;
}
@keyframes wolk-voz-palpito {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.11); }
}
@media (prefers-reduced-motion: reduce) {
	.wolk-sinpe-voz-modal.es-sonando .wlp-sinpe-modal-icono { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * v1.9.95 — AVISO DE CONVERSIÓN "pasate a tarjeta".
 *
 * Deiby: "¿dónde quedó la explicación linda, el brillito, y el palpitar del
 * 5%? … abajo en 3 palabras explicar beneficios — factura automática, se
 * activa automático… como expertos (quizás como ads: que se pasa uno y se
 * cambia con un efecto pro al otro texto)".
 *
 * Tres piezas, cada una con un trabajo:
 *   1. el BRILLO que barre la tarjeta → llama el ojo una vez, no distrae.
 *   2. el −5% que PALPITA → es la razón por la que está pagando hoy.
 *   3. los beneficios que ROTAN → tres palabras a la vez, no un párrafo que
 *      nadie lee en un celular de 390px.
 * Todo se apaga con prefers-reduced-motion (abajo): la información queda,
 * el movimiento no es la información.
 * ═══════════════════════════════════════════════════════════════════════ */
.wlp-convertir-aviso {
	position: relative;
	overflow: hidden;
	margin: 0 0 16px;
	padding: 15px 16px;
	border-radius: 16px;
	border: 1px solid #a7f3d0;
	background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 55%, #ecfdf5 100%);
	box-shadow: 0 6px 18px -10px rgba(5, 150, 105, .55);
	color: #065f46;
}
/* 1. El brillito: un barrido diagonal, lento y espaciado. */
.wlp-convertir-aviso::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -70%;
	width: 45%;
	height: 220%;
	transform: rotate(18deg);
	background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 100% );
	animation: wlp-conv-brillo 4.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes wlp-conv-brillo {
	0%, 62%  { left: -70%; }
	100%     { left: 130%; }
}
.wlp-conv-fila {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}
/* 2. El −5% que palpita: el número manda, el resto acompaña. */
.wlp-conv-pct {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	padding: 7px 12px;
	border-radius: 999px;
	background: #047857;
	color: #fff;
	font-weight: 800;
	font-size: 19px;
	line-height: 1;
	letter-spacing: -.3px;
	box-shadow: 0 0 0 0 rgba(4, 120, 87, .55);
	animation: wlp-conv-palpita 2.1s ease-out infinite;
}
.wlp-conv-pct i { font-style: normal; font-size: 12px; font-weight: 700; opacity: .9; }
@keyframes wlp-conv-palpita {
	0%   { box-shadow: 0 0 0 0 rgba(4, 120, 87, .5); transform: scale(1); }
	45%  { box-shadow: 0 0 0 12px rgba(4, 120, 87, 0); transform: scale(1.055); }
	100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0); transform: scale(1); }
}
.wlp-conv-txt { min-width: 0; }
.wlp-conv-tit {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
}
.wlp-conv-sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: #047857;
	opacity: .92;
}
/* 3. Los beneficios que rotan, estilo ad: uno entra, el otro sale. */
/* v1.10.1 — Deiby: "esas frases salen estripadas". Y era culpa mía: la caja
 * tenía `height: 20px` clavado con `overflow: hidden`. Un número mágico que
 * funcionaba a 13px en inglés y cortaba el texto por la mitad en cuanto la
 * frase crecía, el celular subía el tamaño de letra, o la traducción era más
 * larga. Cortar el texto es peor que mover la tarjeta.
 *
 * La solución sin números mágicos: las láminas se APILAN en la misma celda de
 * un grid (`grid-area: 1/1`). Todas siguen ocupando su espacio, así que la
 * caja mide lo que mide la MÁS ALTA y se adapta sola — no salta al rotar
 * (porque el alto lo fija la más alta, no la visible) y nunca corta nada. */
.wlp-conv-benes {
	position: relative;
	z-index: 1;
	display: grid;
	margin: 11px 0 0;
	padding-top: 10px;
	border-top: 1px dashed rgba(4, 120, 87, .28);
}
.wlp-conv-bene {
	grid-area: 1 / 1;           /* todas en la misma celda: la caja mide la más alta */
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 1.45em;         /* respira aunque la frase sea de una palabra */
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: #065f46;
	opacity: 0;
	pointer-events: none;       /* las ocultas no interceptan toques */
	transform: translateY(9px);
	/* v1.10.2 — RELEVO, no fundido cruzado. Apiladas en la misma celda, dos
	 * textos a media opacidad al mismo tiempo se leen como una mancha (captura
	 * de Deiby: "Se activa al instante" encima de "Factura automática"). La
	 * que sale se va rápido; la que entra ARRANCA DESPUÉS (transition-delay),
	 * así nunca hay dos frases legibles a la vez. */
	transition: opacity .2s ease, transform .28s cubic-bezier(.22,.9,.3,1);
	will-change: opacity, transform;
}
.wlp-conv-bene.es-activo {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: .22s;     /* espera a que la anterior termine de irse */
}
.wlp-conv-bene.es-saliendo { opacity: 0; transform: translateY(-9px); transition-delay: 0s; }
.wlp-conv-bene span[aria-hidden] { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.wlp-convertir-aviso::after { animation: none; opacity: 0; }
	.wlp-conv-pct { animation: none; }
	.wlp-conv-bene { transition: none; }
}

/* v1.9.96 — La cuenta del descuento, en números (Deiby: "no veo el monto del
 * descuento… ni el rebajo"). Precio de siempre tachado → precio de hoy →
 * cuánto se ahorra. El número de hoy es el más grande de la fila: es el que
 * el cliente va a comparar con el botón. */
.wlp-conv-money {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding-top: 11px;
	border-top: 1px dashed rgba( 4, 120, 87, .28 );
}
.wlp-conv-money s {
	font-size: 14px;
	font-weight: 600;
	color: #6b8f83;
	text-decoration-thickness: 1.5px;
}
.wlp-conv-flecha { color: #10b981; font-weight: 800; }
.wlp-conv-money strong {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.4px;
	color: #064e3b;
}
.wlp-conv-ahorro {
	margin-left: auto;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba( 4, 120, 87, .1 );
	font-size: 12px;
	font-weight: 800;
	color: #047857;
	white-space: nowrap;
}