/* ElectroPC · La ficha de un producto suelto del lienzo "Recorrido simple" (26/9).
 *
 * Va encima de `recorrido-ficha.css`, la de una PC: el precio, los botones,
 * cómo llega, las preguntas y la barra del celular son los mismos. Acá está lo
 * que cambia: el orden de arriba, la cantidad, "¿Va en tu PC?", "¿Estás
 * armando una PC nueva?" y los otros para comparar al lado de las preguntas.
 * El marcado lo arma `EPH_PiezaRecorrido` dentro de `.eph-rf.eph-rf-pieza`. */

/* ── Arriba, en el celular: una cosa abajo de la otra, como el lienzo ──
   La caja de compra se deshace para que "¿Va en tu PC?" quede entre los
   botones y cómo llega. */
@media (max-width:1023px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-arriba{display:flex;flex-direction:column;gap:18px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-caja{display:contents}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-foto-col{order:1}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-cabeza{order:2}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-precio-caja{order:3}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-cantidad{order:4}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-varios{order:5;margin-top:-8px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-compra{order:6}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-va{order:7}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-llega{order:8}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-trae{order:9;margin-top:14px}
}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-foto img{width:78%!important;height:82%!important}

/* Las otras fotos, si el producto trae */
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-fotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-mini{height:76px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rf-borde);border-radius:12px;background:var(--rf-blanco);cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-mini[aria-pressed="true"]{border:2px solid var(--rf-azul)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-mini img{width:70%;height:70%;object-fit:contain;margin:0;opacity:.6}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-mini[aria-pressed="true"] img{opacity:1}

/* ── La cantidad ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-cantidad{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-cantidad[hidden],
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-varios[hidden],
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-cantidad > span{font-size:.875rem;font-weight:600;color:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pasos-cant{display:flex;align-items:center;border:1px solid var(--rf-campo);border-radius:999px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-pasos-cant button{width:44px;height:42px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:transparent;
  color:var(--rf-azul);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer;box-shadow:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-pasos-cant button:hover{background:var(--rf-azul-fondo);color:var(--rf-azul)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-pasos-cant button:disabled{color:var(--rf-campo);background:transparent;cursor:default}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pasos-cant output{min-width:28px;text-align:center;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-varios{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--rf-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-varios b{font-weight:700;color:var(--rf-tinta);font-variant-numeric:tabular-nums}
/* Sin JavaScript la cantidad del lienzo no aparece y queda la de WooCommerce. */
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza:not(.eph-rf-con-js) .eph-rf-compra .quantity{display:flex!important;order:1}

/* ── ¿Va en tu PC? ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--rf-borde);border-radius:16px;background:var(--rf-blanco)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-cabeza{display:flex;flex-direction:column;gap:3px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-cabeza b{font-size:1rem;font-weight:700;color:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-cabeza span{font-size:.875rem;color:var(--rf-texto);line-height:1.45}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-botones{display:flex;gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-botones button{flex:1;height:40px;min-height:0;margin:0;padding:0 10px;border:1px solid var(--rf-campo);border-radius:999px;
  background:var(--rf-blanco);color:var(--rf-tinta);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;box-shadow:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-botones button:hover{border-color:var(--rf-tinta);background:var(--rf-blanco);color:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-botones button[aria-pressed="true"]{border-color:var(--rf-tinta);background:var(--rf-tinta);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-resp{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--rf-gris);
  font-size:.875rem;line-height:1.5;color:var(--rf-cuerpo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-resp[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-resp svg{flex:none;margin-top:2px;color:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-resp b{font-weight:600;color:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-resp a{font-weight:600;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-si{background:#EAF8F0}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-si svg{color:var(--rf-verde-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-wa{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.875rem;font-weight:600;
  color:var(--rf-verde);text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-wa:hover{color:var(--rf-verde-tinta);text-decoration:underline}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-resp .eph-rf-va-wa{display:inline;color:var(--rf-verde)}

/* ── ¿Estás armando una PC nueva? ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando{margin-top:32px;display:flex;flex-direction:column;gap:12px;padding:20px 18px;border-radius:16px;background:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando > div{display:flex;flex-direction:column;gap:6px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando p{font-size:.875rem;line-height:1.5;color:var(--rf-campo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-armando-blanco{display:flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;
  background:#FFFFFF;color:var(--rf-tinta);font-size:1rem;font-weight:600;text-decoration:none;white-space:nowrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-armando-blanco:hover{background:var(--rf-gris);color:var(--rf-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-armando-link{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 12px;
  color:#FFFFFF;font-size:1rem;font-weight:600;text-decoration:none;white-space:nowrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-armando-link:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}

/* ── Abajo: los otros para comparar y las preguntas ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-abajo{display:flex;flex-direction:column;gap:32px;padding-top:32px;padding-bottom:40px}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-otras{display:flex;flex-direction:column;gap:14px;padding:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-pc-specs{margin-bottom:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-pc-precio{margin-top:auto;padding-top:4px}

@media (min-width:760px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-pcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-pc-foto{height:130px}
}

/* ── Computadora: tres columnas ──
   La foto; qué es, "¿Va en tu PC?" y las características; y la caja. La de una
   PC pasó a dos columnas el 29/9 y esta sigue con su lienzo. */
@media (min-width:1024px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-arriba{grid-template-columns:minmax(0,320fr) minmax(0,336fr) clamp(360px,34vw,388px);column-gap:28px;
    grid-template-areas:"foto cabeza caja" "foto va caja" "foto trae caja"}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-cabeza{grid-area:cabeza}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-caja{margin-left:0;position:static}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-foto{height:auto}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-h1{font-size:1.5rem;line-height:1.2}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-specs{font-size:1rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-va{grid-area:va}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-foto{aspect-ratio:320 / 360}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-trae .eph-rf-h2{font-size:1.125rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando{margin-top:48px;flex-direction:row;align-items:center;gap:24px;padding:28px 32px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando > div{flex:1;max-width:640px;margin-right:auto}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando h2{font-size:1.5rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-abajo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start;
    padding-top:48px;padding-bottom:56px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-otras{gap:18px}
}
@media (min-width:1200px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-pieza .eph-rf-h1{font-size:1.75rem;line-height:1.15}
}

/* ── Modo oscuro (generado por herramientas/gen_recorrido_oscuro.py: no editar a mano) ── */
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-pasos-cant button:disabled{color:#CBD5E1}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-botones button[aria-pressed="true"]{background:#E9EEF6;color:#0B1222}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-si{background:#0F2E1E}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando{background:#22304F}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando p{color:#CBD5E1}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-armando-blanco{background:#151D35}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-pasos-cant button:disabled{color:#CBD5E1}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-va-botones button[aria-pressed="true"]{background:#E9EEF6;color:#0B1222}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-va-si{background:#0F2E1E}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando{background:#22304F}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf-armando p{color:#CBD5E1}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .eph-rf .eph-rf-armando-blanco{background:#151D35}}