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

/* Banner del inicio: la foto queda a 44 px del header, cada diapositiva conserva su alto (no se estira a la más alta)
   y la diapositiva sin foto reserva el área con fondo suave, así el contenido no salta al cambiar (wireframe v0.12) */
.wp-site-blocks > main.emx-home{margin-block-start:0}
.emx-hero > .emx-slider{margin-block-start:0}
.emx-slider-track{align-items:start}
.emx-slide-media.is-empty{height:380px;border-radius:24px;background:var(--soft)}
@media (min-width:782px){.emx-sec.emx-hero{padding-bottom:8px}}
@media (max-width:781px){.emx-slide:not(.is-cover) .emx-slide-media.is-empty{height:240px;border-radius:0}}

/* Cinta de beneficios (celular): a todo el ancho de la pantalla y sin imán, para que avance continua;
   las copias que agrega theme.js (ocultas al lector) solo se ven en celular */
.emx-attrs .emx-promise.is-dup{display:none}
@media (max-width:781px){
	.emx-attrs .emx-promises.is-row{scroll-snap-type:none;margin-inline:-16px!important}
	.emx-attrs .emx-promises.is-row .emx-promise.is-dup{display:flex}
}
/* Cinta de beneficios entre 782 y 999 px: los 4 atributos con las medidas de celular (círculo de 40, textos de 14/12) para que quepan
   en una fila sin desbordar la página; si un texto más largo no cabe, pasa a una segunda fila */
@media (min-width:782px) and (max-width:999px){
	.emx-attrs .emx-promises.is-row{flex-wrap:wrap;gap:16px}
	.emx-attrs .emx-promise{font-size:14px;gap:10px}
	.emx-attrs .emx-promise b{font-size:14px}
	.emx-attrs .emx-promises.is-row .emx-promise > span{font-size:12px}
	.emx-attrs .emx-promises.is-row .emx-promise .bi{width:40px;height:40px;padding:9px}
}

/* DEALS: el tachado de "usadas" es una línea delgada que no tapa la palabra (dueño, v120) */
.emx-h-strike s{text-decoration-thickness:1.5px}

/* Chips que filtran la fila: el que no tiene equipos se oculta (theme.js le pone hidden) */
.emx-qf-group .emx-qf[hidden]{display:none!important}

/* Filas del inicio: 40 px de las tarjetas al enlace "Ver todos…" */
.emx-home .emx-rail-wrap.is-rail > .emx-rail-foot{margin-top:40px}

/* DEALS Black (escritorio): 16 px de la bajada a los chips y 40 px de los chips a la fila */
@media (min-width:782px){.emx-black .emx-rail-head:has(.emx-qf-group){margin-top:16px;margin-bottom:40px}}

/* Reseñas: sin imán, para que la fila se deslice continua (theme.js) */
.emx-rev-box .emx-rev-body{scroll-snap-type:none;scroll-behavior:auto}
/* Botón de pausa (escritorio): dentro del relleno de 48 px de la caja, con su borde derecho en el de la fila y 12 px sobre ella */
@media (min-width:782px){.emx-rv-pause{top:48px;right:48px}}

/* Inicio: "Una empresa real" va dentro del bloque de reseñas, a 40 px de la caja (28 en celular) */
.emx-home .emx-revs:has(+ .emx-real){padding-bottom:0}
.emx-home .emx-revs + .emx-real{padding-top:40px}
@media (max-width:781px){.emx-home .emx-revs + .emx-real{padding-top:28px}}

/* Ventana de video (wireframe v0.12): panel 9:16 al 85 % del alto, radio 24, sobre un velo; en celular ocupa la pantalla.
   Arriba barras de pasos, "Paso N de M", cerrar y título; en el centro la portada con reproducir; abajo las flechas */
.emx-vm{position:fixed;inset:0;z-index:100010;display:grid;place-items:center;line-height:1.45}
.emx-vm[hidden]{display:none}
.emx-vm-shade{position:absolute;inset:0;padding:0;border:0;background:rgba(0,0,0,.78);cursor:pointer}
.emx-vm-panel{position:relative;display:flex;flex-direction:column;height:85%;aspect-ratio:9/16;max-width:92%;overflow:hidden;border-radius:24px;background:var(--ink);color:#fff;touch-action:pan-y pinch-zoom}
.emx-vm-top{position:absolute;inset:0 0 auto;z-index:2;padding:14px 14px 0;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.emx-vm-bars{display:flex;gap:4px}
.emx-vm-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.emx-vm-bars i.on{background:#fff}
.emx-vm-head{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.emx-vm-count{margin:0;font-size:14px;font-weight:700;color:#fff}
.emx-vm .emx-vm-t{margin:4px 0 0;padding-right:8px;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:0;color:#fff;text-wrap:wrap}
.emx-vm-x,.emx-vm-arrow,.emx-vm-play{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.emx-vm-x:hover,.emx-vm-arrow:hover,.emx-vm-x:focus-visible,.emx-vm-arrow:focus-visible{background:#fff;color:var(--ink)}
.emx-vm-x svg,.emx-vm-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emx-vm-video{position:relative;flex:1;display:grid;place-items:center;overflow:hidden}
.emx-vm-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.6),transparent 38%,transparent 70%,rgba(0,0,0,.5));pointer-events:none}
.emx-vm-cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.emx-vm-ph{position:absolute;bottom:90px;z-index:1;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px}
.emx-vm-play{position:relative;z-index:1;width:68px;height:68px;background:rgba(255,255,255,.9);color:var(--ink);transition:transform .15s}
.emx-vm-play:hover,.emx-vm-play:focus-visible{background:#fff;transform:scale(1.06)}
.emx-vm-play svg{width:24px;height:24px;margin-left:4px;fill:currentColor}
/* El tramo suena debajo del encabezado y termina sobre la barra de flechas, para que sus controles no queden tapados */
.emx-vm-v{position:absolute;inset:0 0 70px;z-index:1;width:100%;height:calc(100% - 70px);border:0;object-fit:cover;background:#000}
.emx-vm.is-playing .emx-vm-play,.emx-vm.is-playing .emx-vm-ph{display:none}
.emx-vm-nav{position:absolute;inset:auto 0 0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:14px}
.emx-vm-hint{display:none;font-size:12px;color:rgba(255,255,255,.7)}
.emx-vm :focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Videos de clientes: suenan al abrir, llenan la ventana y las flechas van a los lados */
.emx-vm.is-direct .emx-vm-v{inset:0;height:100%}
.emx-vm.is-direct .emx-vm-nav{inset:50% 0 auto;transform:translateY(-50%);pointer-events:none}
.emx-vm.is-direct .emx-vm-nav button{pointer-events:auto}
@media (max-width:781px){
	.emx-vm-panel{width:100%;height:100%;max-width:100%;aspect-ratio:auto;border-radius:0}
	.emx-vm:not(.is-direct) .emx-vm-hint{display:block}
}