/* v0.12 · 87-gracias — Gracias por tu compra (dueño, 10 nov 2026; gracias-por-tu-compra.css de la tarea con las clases del tema): banda
   niebla con el estado del pago y el resumen del pedido, y la encuesta de una pregunta en una ventana centrada de 480px. Móvil hasta 700px. */
.emx-gr,.emx-gr-sv{--gr-ink:var(--wp--preset--color--tinta,#212427);--gr-mute:var(--wp--preset--color--gris-oscuro,#3B3F42);--gr-soft:#5A5F69;--gr-fog:var(--wp--preset--color--niebla,#F6F7F8);--gr-line:#7A8085;--gr-bd:var(--wp--preset--color--borde,#C9CDD1);--gr-acc:var(--wp--preset--color--celestial,#2695D1);--gr-hov:var(--wp--preset--color--celeste-claro,#A8D5ED);--gr-ok:#1DD390;--gr-bad:#B3123F;color:var(--gr-ink)}
.emx-thanks-page{overflow-x:clip;padding-top:0!important}
.emx-thanks-page .wp-block-post-content.emx-thanks-order{margin-top:0!important}
/* La banda gris arranca pegada al header también en escritorio (sin los 16px entre bloques de WordPress ni el párrafo vacío del contenido) */
.wp-site-blocks > main.emx-thanks-page{margin-block-start:0}
.emx-thanks-order > p:empty{display:none}
.emx-thanks-order > .woocommerce:has(> .emx-gr){margin-block-start:0}
.emx-thanks-order .woocommerce:has(> .emx-gr){max-width:none;margin-inline:0}
/* La banda va de borde a borde aunque el contenido esté en la columna de la página */
.emx-gr .emx-gr-top{margin-inline:calc(50% - 50vw)}
:is(.emx-gr,.emx-gr-sv) :is(h1,h2,p,ul,dl,dd){margin:0}
:is(.emx-gr,.emx-gr-sv) :is(a,button,textarea):focus-visible{outline:3px solid var(--gr-acc);outline-offset:2px}
.emx-gr .emx-gr-top{background:var(--gr-fog);padding-block:56px 64px}
.emx-gr .emx-gr-wrap{max-width:1200px;margin-inline:auto;padding-inline:40px}
.emx-gr .emx-gr-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start}
.emx-gr .emx-gr-st{display:flex;flex-direction:column;gap:14px}
.emx-gr .emx-gr-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;font-weight:700;color:var(--gr-ink)}
.emx-gr .emx-gr-led{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gr-ok)}
.emx-gr .emx-gr-st.is-wait .emx-gr-led{background:var(--gr-acc)}
.emx-gr .emx-gr-st.is-fail .emx-gr-led{background:var(--gr-bad)}
.emx-gr .emx-gr-h1{font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--gr-ink)}
.emx-gr .emx-gr-h1:focus{outline:none}
.emx-gr .emx-gr-lead{font-size:16px;line-height:1.6;color:var(--gr-mute);max-width:600px}
.emx-gr .emx-gr-lead b{color:var(--gr-ink)}
.emx-gr .emx-gr-btns{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:8px}
:is(.emx-gr,.emx-gr-sv) .emx-gr-btn,.emx-gr .emx-gr-btn2{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:999px;font:inherit;font-size:19px;line-height:1.2;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
:is(.emx-gr,.emx-gr-sv) .emx-gr-btn{border:1px solid var(--gr-acc);background:var(--gr-acc);color:#fff}
:is(.emx-gr,.emx-gr-sv) .emx-gr-btn:hover{background:var(--gr-hov);border-color:var(--gr-hov);color:var(--gr-ink)}
:is(.emx-gr,.emx-gr-sv) .emx-gr-btn:active{background:var(--gr-acc);border-color:var(--gr-acc);color:#fff}
.emx-gr .emx-gr-btn2{border:2px solid var(--gr-line);background:#fff;color:var(--gr-ink)}
.emx-gr .emx-gr-btn2:hover{background:var(--gr-hov);border-color:var(--gr-hov)}
:is(.emx-gr,.emx-gr-sv) .emx-gr-btn svg{width:22px;height:22px;flex:none;fill:currentColor}
.emx-gr .emx-gr-sum{padding:28px;border-radius:24px;background:#fff}
:is(.emx-gr,.emx-gr-sv) .emx-gr-h2{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:0;color:var(--gr-ink)}
.emx-gr .emx-gr-rec{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.emx-gr .emx-gr-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px 14px;align-items:center}
/* Miniatura sobre fondo niebla visible (wireframe 12 nov): el blanco de la foto se funde con el fondo */
.emx-gr .emx-gr-thumb{display:block;width:56px;height:56px;border-radius:12px;background:var(--gr-fog);overflow:hidden;isolation:isolate}
.emx-gr .emx-gr-item img{display:block;width:56px;height:56px;object-fit:contain;border-radius:12px;background:transparent;mix-blend-mode:multiply}
.emx-gr .emx-gr-item b{font-size:16px;line-height:1.4;font-weight:700}
/* Con varios productos, el precio va en la segunda columna, debajo del nombre (.gr-item .gr-price) */
.emx-gr .emx-gr-item .emx-gr-price{grid-column:2;font-size:16px;font-weight:400;white-space:nowrap}
.emx-gr .emx-gr-rows{display:flex;flex-direction:column;border-top:1px solid var(--gr-bd)}
.emx-gr .emx-gr-rows > div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--gr-bd);font-size:14px;line-height:1.5}
.emx-gr .emx-gr-rows dt{color:var(--gr-soft)}
.emx-gr .emx-gr-rows dd{text-align:right;color:var(--gr-ink)}
.emx-gr .emx-gr-rows .emx-gr-total{border-bottom:0;font-size:16px;font-weight:700}
.emx-gr .emx-gr-rows .emx-gr-total dt{color:var(--gr-ink)}
.emx-gr .emx-gr-save{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.2;font-weight:700;color:var(--gr-acc);text-decoration:underline;text-underline-offset:3px}
.emx-gr .emx-gr-save:hover{color:var(--gr-ink)}

/* Encuesta: ventana centrada de 480px (también en el celular, con 16px de margen) */
.emx-gr-sv{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.emx-gr-sv[hidden]{display:none}
.emx-gr-sv-shade{position:absolute;inset:0;border:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s;cursor:pointer}
.emx-gr-sv-box{position:relative;width:min(480px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:28px;border-radius:24px;background:#fff;box-shadow:0 20px 48px rgba(0,0,0,.2);transform:translateY(16px);opacity:0;transition:transform .25s,opacity .25s}
.emx-gr-sv.on .emx-gr-sv-shade{opacity:1}
.emx-gr-sv.on .emx-gr-sv-box{transform:none;opacity:1}
/* Cerrar: círculo blanco de 44px con borde de 1px #C9CDD4 (.circ del wireframe); Celeste claro al pasar y Celestial al presionar */
.emx-gr-sv-x{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #C9CDD4;background:#fff;color:var(--gr-ink);cursor:pointer}
.emx-gr-sv-x:hover{background:var(--gr-hov);border-color:var(--gr-hov)}
.emx-gr-sv-x:active{background:var(--gr-acc);border-color:var(--gr-acc);color:#fff}
.emx-gr-sv-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.emx-gr-sv-q{display:flex;flex-direction:column;gap:12px}
.emx-gr-sv-q .emx-gr-h2{padding-right:48px}
.emx-gr-sv-q .emx-gr-h2:focus{outline:none}
.emx-gr-sv .emx-gr-sv-kick{margin-top:8px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gr-acc)}
.emx-gr-sv .emx-gr-sv-kick + .emx-gr-sv-p{margin-top:-6px}
.emx-gr-sv .emx-gr-sv-p{font-size:18px;line-height:1.4;font-weight:700;color:var(--gr-ink)}
.emx-gr-opts{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.emx-gr-opts li{margin:0}
.emx-gr-opt{width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--gr-bd);border-radius:12px;background:#fff;font:inherit;font-size:16px;line-height:1.35;text-align:left;color:var(--gr-ink);cursor:pointer;transition:background-color .15s,border-color .15s}
.emx-gr-opt:hover{background:var(--gr-hov);border-color:var(--gr-hov)}
.emx-gr-opt[aria-expanded="true"],.emx-gr-opt[aria-expanded="true"]:hover,.emx-gr-opt:active{background:#D4EAF6;border-color:var(--gr-acc);box-shadow:inset 0 0 0 1px var(--gr-acc);font-weight:700}
.emx-gr-sv-otro{display:flex;flex-direction:column;gap:10px}
.emx-gr-sv-otro[hidden]{display:none}
.emx-gr-sv-otro textarea{width:100%;box-sizing:border-box;min-height:88px;padding:10px 14px;border:1px solid var(--gr-line);border-radius:12px;font:inherit;font-size:16px;resize:vertical}
.emx-gr-sv-otro textarea:focus{outline:none;border:2px solid var(--gr-acc);padding:9px 13px}
.emx-gr-sv-later{align-self:center;min-height:44px;padding:8px 12px;border:0;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--gr-acc);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.emx-gr-sv-ok{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:24px;text-align:center;font-size:16px;line-height:1.5}
.emx-gr-sv-ok[hidden],.emx-gr-sv-q[hidden]{display:none}
.emx-gr-sv-okic{display:block;width:56px;height:56px;color:var(--gr-acc)}
.emx-gr-sv-okic svg{width:56px;height:56px;fill:currentColor}
@media (prefers-reduced-motion:reduce){.emx-gr-sv-shade,.emx-gr-sv-box{transition:none}}
@media (max-width:700px){
	.emx-gr .emx-gr-wrap{padding-inline:16px}
	.emx-gr .emx-gr-top{padding-block:32px 40px}
	.emx-gr .emx-gr-cols{grid-template-columns:minmax(0,1fr);gap:28px}
	.emx-gr .emx-gr-h1{font-size:24px}
	:is(.emx-gr,.emx-gr-sv) .emx-gr-h2{font-size:18px}
	.emx-gr .emx-gr-btns{flex-direction:column;align-items:stretch}
	.emx-gr .emx-gr-sum{padding:20px}
	.emx-gr-sv{padding:16px}
	.emx-gr-sv-box{max-height:calc(100vh - 32px);padding:24px 20px}
}