/* OREM — contenido por destino (WEB-81). Clases para el editor, sin código:
 *   orem-solo-mx -> solo destino México (y DEFAULT: sin destino, Googlebot, sin JS, módulo USA apagado)
 *   orem-solo-us -> solo destino EE. UU. confirmado
 * Elementor: Avanzado -> Clases CSS (sección, columna o widget). Clásico: pestaña Texto,
 * <div class="orem-solo-us">…</div>. Nunca las dos clases en el mismo elemento.
 * Señal única: body.orem-dest-us (WC_Orem_USA_Header::body_class con sesión + usa-modo.js::dispatch()).
 * El HTML cacheado es idéntico para todas las visitantes -- el filtrado ocurre aquí, en CSS.
 * ⚠️ CONTRATO: si algún contenido usa orem-solo-us, retirar este archivo lo hace visible a México --
 * antes de tocarlo, buscar usos en _elementor_data/post_content (ver Documentation/contenido-por-destino.md).
 */
body:not(.orem-dest-us):not(.elementor-editor-active) .orem-solo-us { display: none !important; }
body.orem-dest-us:not(.elementor-editor-active) .orem-solo-mx { display: none !important; }

/* Solo EE. UU.: una fila de Elementor con alguna tarjeta oculta centra las que quedan
   (México nunca entra por este selector, porque ahí orem-solo-mx sigue visible). */
body.orem-dest-us .elementor-container:has(> .orem-solo-mx) { justify-content: center; }

/* Dentro del editor de Elementor, las dos variantes se ven siempre, marcadas -- para que
   quien edite sepa qué está viendo sin tener que cambiar de destino para comprobarlo. */
body.elementor-editor-active .orem-solo-mx,
body.elementor-editor-active .orem-solo-us { position: relative; outline: 2px dashed var(--orem-burgundy, #6b1d33); outline-offset: -2px; }
body.elementor-editor-active .orem-solo-mx::after,
body.elementor-editor-active .orem-solo-us::after {
    position: absolute; top: 0; left: 0; z-index: 5; padding: 2px 6px;
    font: 600 10px/1.4 sans-serif; color: #fff; background: var(--orem-burgundy, #6b1d33); pointer-events: none;
}
body.elementor-editor-active .orem-solo-mx::after { content: "Solo México"; }
body.elementor-editor-active .orem-solo-us::after { content: "Solo EE. UU."; }

/* orem-recorte-tarjeta: recorta una foto de producto a la misma proporción que sus
 * vecinas en una fila de tarjetas (1420x1024 ~ 1.39:1), para cuando la única imagen
 * disponible viene en otra proporción (ej. una foto cuadrada de un producto digital
 * en el bloque "Completa tu ritual", WEB-81). Quitar esta clase en cuanto exista una
 * foto ya tomada en la proporción correcta -- es un parche de recorte, no el diseño final. */
.orem-recorte-tarjeta img { aspect-ratio: 1420 / 1024; object-fit: cover; width: 100%; height: auto; }