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

/* ---------- Ficha (usado y nuevo): arranque, galería y caja de compra (wireframe producto-usado / producto-nuevo) ---------- */
/* El contenido arranca pegado al header; en escritorio las migas son una línea de 26px, la grilla queda 16px abajo y 56px la separan de la sección siguiente */
.emx-main.emx-pd{margin-block-start:0}
@media (min-width:782px){
	.single-product .emx-crumbs .rank-math-breadcrumb p{margin:0;line-height:26px}
	.emx-pd .pd-grid{margin-bottom:56px}
}
/* 40px entre la galería y la caja de compra (el gap de 16px de los estilos globales le ganaba a product.css) */
.wp-block-columns.pd-grid{column-gap:40px}
/* Galería: la foto cabe entera en el cuadro. La fila del grid toma el alto del cuadro (con fila automática y ".woocommerce img{height:auto}" la foto se salía y se cortaba abajo) */
.pd-gal .pd-stage,.pd-gal .pd-shot{grid-template-rows:100%;grid-template-columns:100%}
.pd-gal .pd-shot img,.pd-gal .pd-stage > img{height:100%}
/* Escritorio: cuadro 4:3 (wireframe v0.5, "foto más pequeña"); en celular manda el alto de 214px de theme.css */
@media (min-width:782px){.pd-main{aspect-ratio:4/3}}

/* Caja de compra: 10px entre filas; fila "DEALS · Usados Certificados" + estrellas de 24px; sobretítulo con .04em */
.pd-buy{gap:10px}
.pd-eyerow{gap:4px 8px}
.pd-eyerow .pd-stars{min-height:24px}
.pd-eyebrow{letter-spacing:.04em}
/* Precio: 30px con interlineado 1.5 (28px en celular) y grilla de 4px 10px */
.pd-price{gap:4px 10px}
.pd-p{font-size:30px;line-height:1.5}
@media (max-width:781px){.pd-p{font-size:28px}}

/* Estado y batería: caja de 10px 12px con 3px entre líneas; valor de 16px en celular. La descripción del estado lleva 2px arriba y 6px hasta la escala */
.fact{padding:10px 12px;gap:3px}
.fact .fact-s{margin:0}
.fact .fact-s:has(+ .scale){margin:2px 0 6px}
.fact .scale{margin-top:0}
@media (max-width:781px){.fact-v{font-size:16px}}
/* Enlace al pie de cada caja: en escritorio, ícono (i) de 14px a 6px del texto; flecha de trazo que avanza al pasar el puntero. En celular solo la flecha */
.fact .fact-l{gap:6px}
.fact .fact-l .fl-i{display:block;width:14px;height:14px;stroke-width:2}
.fact .fact-l .fl-c{transition:transform .15s}
.fact .fact-l:hover .fl-c,.fact .fact-l:focus-visible .fl-c{transform:translateX(2px)}
@media (max-width:781px){.fact .fact-l{gap:4px}.fact .fact-l .fl-i{display:none}}
@media (prefers-reduced-motion:reduce){.fact .fact-l .fl-c{transition:none}}
/* Teléfonos muy angostos (≤359px) y escritorio angosto (782-1023px): las dos cajas no caben lado a lado sin salirse de la pantalla; van una debajo de otra (sin el ícono (i) en escritorio angosto) */
@media (max-width:359px){.pd-facts{grid-template-columns:1fr}}
@media (min-width:782px) and (max-width:1023px){.pd-facts{grid-template-columns:1fr}.fact .fact-l{gap:4px}.fact .fact-l .fl-i{display:none}}

/* Aviso de reserva: 22px hasta "Comprar" (margen de 12px del wireframe + 10px de la caja) */
.pd-buy > .pd-stock{margin-bottom:12px!important}

/* Promesas de la caja de compra: íconos de 20px; "Ver qué revisamos" de 24px de alto */
.pd-buy .emx-promise .bi{width:20px;height:20px}
.pr-more{min-height:24px}

/* ---------- Ficha: secciones de abajo ---------- */
/* Secciones de la ficha (.pd-sec del wireframe): 56px arriba y abajo (40px en celular); bajada de 17px a 10px del título (15px en celular) */
.emx-sec.emx-sec-pd{padding-block:56px}
.emx-sec-pd .emx-rail-lead{margin-top:10px;font-size:17px;line-height:1.5}
@media (max-width:781px){.emx-sec.emx-sec-pd{padding-block:40px}.emx-sec-pd .emx-rail-lead{font-size:15px}}
/* Títulos de sección en celular: 22px (Preguntas frecuentes se queda en 24px) */
@media (max-width:781px){.dt-t,.single-product .emx-sec:not(.emx-faq) h2.wp-block-heading,.single-product .emx-rail-t{font-size:22px}}

/* Detalles del equipo: filas blancas con borde de 1px, 10px entre ellas y flecha de trazo de 20px que avanza al pasar el puntero (8px bajo el título en celular) */
.dt-rows{gap:10px}
.dt-row,.dt-row:first-child{padding:10px 16px 10px 20px;border:1px solid var(--line);box-shadow:none}
.dt-row:hover{background:var(--soft);border-color:var(--gray);box-shadow:none}
.dt-row:hover b{text-decoration:none}
.dt-chev{width:20px;height:20px;transition:transform .15s}
.dt-row:hover .dt-chev,.dt-row:focus-visible .dt-chev{transform:translateX(2px)}
@media (max-width:781px){.dt-grid{gap:8px}}
@media (prefers-reduced-motion:reduce){.dt-chev{transition:none}}

/* Videos de clientes: sobretítulo a 8px del título (22px hasta la fila en celular); video con radio 18, duración con radio 6, nombre con interlineado 1.3 y 12px de aire bajo la fila */
.emx-tst-head > .emx-eyebrow{margin-bottom:8px}
@media (max-width:781px){.emx-clientes .emx-tst-head{margin-bottom:22px}}
.emx-tst{padding-bottom:12px}
.emx-tst .emx-reel-img{border-radius:18px}
.emx-tst .emx-reel-dur{border-radius:6px}
.emx-tst-n{line-height:1.3}

/* Otras unidades: la tabla no lleva flechas (en celular su caja vacía bajaba la tabla 16px); 24px de la bajada a la tabla */
.emx-rail-wrap.is-table .emx-rail-nav{display:none}
.emx-rail-wrap.is-table .emx-rail-head{margin-bottom:24px}
/* Otras unidades (tabla, wireframe v0.4): letra de 15px (14px en celular); Equipo al 42%; precio a la derecha, sin partirse y con cifras tabulares;
   estado y batería en gris y sin partirse (en la fila que se está viendo, en tinta); botón "Ver" con borde de 2px */
.emx-alt{font-size:15px}
.emx-alt th:nth-child(1){width:42%}
.emx-alt th:nth-child(4),.emx-alt td:nth-child(4){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.emx-alt td:nth-child(2),.emx-alt td:nth-child(3){white-space:nowrap;color:var(--muted)}
.emx-alt tr.here td:nth-child(2),.emx-alt tr.here td:nth-child(3){color:var(--ink)}
.emx-alt .alt-n{font-size:15px}
.emx-alt .alt-d{margin-top:2px}
.emx-alt .here-t{display:table;margin-top:6px}
.emx-alt .btn{border-width:2px}
@media (max-width:781px){.emx-alt{font-size:14px}}
/* "Ver todas las … usadas →" de la tabla: a la izquierda, a 16px y con la flecha pegada al texto, de su mismo tamaño (las filas de tarjetas siguen centradas) */
.emx-rail-wrap.is-table .emx-rail-foot{margin:16px 0 0;text-align:left}
.emx-rail-wrap.is-table .emx-rail-all{gap:0}
.emx-rail-wrap.is-table .emx-rail-all > span[aria-hidden]{font-size:inherit;font-weight:inherit}