/* v0.12 · 71-acc2 — reglas nuevas de este frente (se cargan después de theme.css; al final se pegan a theme.css en este orden). */

/* ---------- Gracias · estado del pago (wireframe gracias.html: .bp-thanks-top, .bp-status) ---------- */
/* 40 px arriba y 24 px abajo también en celular (theme.css le pone 44 px a todo .emx-sec) */
.emx-sec.emx-thanks-top{padding-block:40px 24px}
/* Círculo del ícono de 56 px también en celular; el pedido por WhatsApp espera como pendiente y Sumas Pay (celeste) */
.emx-order-status .emx-os-icon{width:56px;height:56px}
.emx-order-status.is-whatsapp .emx-os-icon{background:var(--sky-light)}
.emx-order-status .emx-os-ctas{margin-top:22px}
/* Botones de 52 px con borde de 2 px y 8 px entre ícono y texto, como el .btn de las páginas base del wireframe (.bp .btn) */
.emx-order-status .btn,.emx-order-account .btn{line-height:1.5;border-width:2px;gap:8px}
.emx-order-status .emx-os-help{color:var(--ink)}
/* Tarjeta del pedido: 24 px bajo el estado (sin el margen del párrafo vacío de la página) y "Ver mi pedido" la deja a 20 px del header fijo */
.emx-thanks-order > .woocommerce{margin-block-start:0}
.bp-order{scroll-margin-top:calc(var(--emx-hdr-h,140px) + 20px)}
/* Miniatura de 64 px también en celular, como el wireframe: la columna baja a 56 px y la imagen toma 8 px del espacio, así el texto no se mueve.
   max-width:none porque woocommerce.css la limita al ancho de la columna */
@media (max-width:781px){.bp-item img{width:64px;height:64px;max-width:none}}

/* ---------- Gracias · Qué sigue (wireframe: .h2-s, .bp-steps, .bp-proof, .bp-ask) ---------- */
.emx-sec.emx-thanks h2.wp-block-heading{font-size:28px;font-weight:700;line-height:1.15}
/* Pasos: 20 px bajo el título, 16 px entre pasos y líneas de 760 px como máximo, alineadas a la izquierda */
.emx-thanks .emx-steps{margin-top:20px;gap:16px}
.emx-thanks .emx-steps li{max-width:760px;padding-left:46px}
.emx-thanks .emx-steps li::before{top:-3px}
/* Respaldo en línea (se apila en celular, sin deslizar): íconos de 22 px sin caja y texto de 14 px en negrita */
.emx-thanks .emx-promises.is-row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:24px;overflow:visible;scroll-snap-type:none;font-weight:700}
.emx-thanks .emx-promises.is-row .emx-promise{flex:0 1 auto;gap:8px}
.emx-thanks .emx-promises.is-row .emx-promise .bi{width:22px;height:22px;margin:0;padding:0;border-radius:0;background:none}
/* "¿Tienes una duda…?" y el enlace de WhatsApp en la misma línea, separados como por un espacio (el enlace baja entero si no cabe).
   16 px abajo antes del relleno de la sección, como el párrafo .bp-ask del wireframe */
.emx-thanks .emx-ask{margin-top:20px;margin-bottom:16px;gap:0 4px}
.emx-thanks .emx-ask > p{margin:0}
.emx-thanks .emx-ask .emx-wa-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Gracias · crear contraseña y "Completa tu Mac": títulos de sección de 28 px (22 px en celular) ---------- */
.emx-thanks-page .emx-order-account h2,.emx-thanks-page .emx-rail-t{font-size:28px;font-weight:700;line-height:1.15}
@media (max-width:781px){
	.emx-sec.emx-thanks h2.wp-block-heading,.emx-thanks-page .emx-order-account h2,.emx-thanks-page .emx-rail-t{font-size:22px}
}