/* alt-base.css */
/* ElectroPC · La base que comparten las pantallas nuevas.
 *
 * Los tokens y las piezas que usan tanto la pantalla de producto como la de
 * compra viven acá. Estaban adentro de `producto-alt.css` hasta que apareció la
 * segunda pantalla: dos copias del mismo bloque de colores es una sola cosa que
 * se corrige en un lado y se olvida en el otro, y ahí las dos pantallas dejan de
 * parecer de la misma casa.
 *
 * Todo cuelga de `.epa`, que es donde viven los tokens: el tema no aporta
 * ninguno y estas páginas no cargan `home.css`. Cada selector repite su primera
 * clase porque el tema estiliza `.entry-content a`, `h2`, `img` y `dl`, que es
 * justo donde cae este contenido.
 */
.epa{
  --epa-fondo:#F8FAFC; --epa-blanco:#FFFFFF; --epa-tinta:#0F172A; --epa-texto:#475569;
  --epa-borde:#E2E8F0; --epa-foto:#FFFFFF;
  --epa-azul:#0064FF; --epa-azul-osc:#0052D4; --epa-azul-texto:#0052D4;
  --epa-badge-bg:#DBEAFE; --epa-badge-texto:#0052D4;
  --epa-verde:#0B7038; --epa-verde-osc:#095C2E; --epa-verde-tinta:#05602C;
  --epa-sombra:0 1px 2px rgba(16,24,40,.05);
  --epa-radio:16px; --epa-ease:var(--ep-suave,cubic-bezier(.16,1,.3,1));
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--epa-tinta);
  font-size:1rem;
  line-height:1.55;
}
/* Misma convención que el tema y que `rendimiento.css`: manda el atributo y,
   si no está puesto, decide el sistema. */
[data-theme="dark"] .epa{
  --epa-fondo:#0B1222; --epa-blanco:#151D35; --epa-tinta:#E9EEF6; --epa-texto:#A2B0C6;
  --epa-borde:#253149; --epa-foto:#FFFFFF;
  --epa-azul:#3B82F6; --epa-azul-osc:#2563EB; --epa-azul-texto:#7FB0FF;
  --epa-badge-bg:#17305C; --epa-badge-texto:#9EC5FF;
  --epa-verde:#15954A; --epa-verde-osc:#0E7A3C; --epa-verde-tinta:#5FD98D;
  --epa-sombra:0 1px 2px rgba(0,0,0,.3);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .epa{
    --epa-fondo:#0B1222; --epa-blanco:#151D35; --epa-tinta:#E9EEF6; --epa-texto:#A2B0C6;
    --epa-borde:#253149; --epa-foto:#FFFFFF;
    --epa-azul:#3B82F6; --epa-azul-osc:#2563EB; --epa-azul-texto:#7FB0FF;
    --epa-badge-bg:#17305C; --epa-badge-texto:#9EC5FF;
    --epa-verde:#15954A; --epa-verde-osc:#0E7A3C; --epa-verde-tinta:#5FD98D;
    --epa-sombra:0 1px 2px rgba(0,0,0,.3);
  }
}

/* El tema envuelve el contenido de una página en un título grande, un
   `.section` con 48px arriba y abajo y un `.container` de 1200px con 16px de
   costado. Las tres cosas sobran acá: estas pantallas traen su propio ancho y
   su propio ritmo, y el título de la página se comía la primera pantalla del
   celular. Se neutralizan solo adentro de estas páginas.

   ⚠️ Las dos últimas decían `.entry-content .section` y `.entry-content
   .container`, y **no hacían nada**: esos dos envoltorios son ancestros del
   `.entry-content`, no descendientes. Se veía en la home del modo vista previa,
   donde el hero quedaba encajonado a 1200px y con 80px de aire muerto arriba.
   Van colgadas de `.site-main` para no tocar el encabezado ni el pie, que usan
   las mismas clases. */
body.eph-alt .page-hero{display:none}
body.eph-alt .site-main .section{padding-block:0}
body.eph-alt .site-main .container{max-width:none;padding-inline:0}

.epa .epa-wrap{max-width:74rem;margin-inline:auto;padding-inline:clamp(1rem,3.5vw,2.5rem)}
.epa .epa-num{font-variant-numeric:tabular-nums}
.epa a{color:inherit;text-decoration:none}
.epa h1,.epa h2{line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0}
.epa p{margin:0}
.epa img{max-width:100%;display:block}

.epa .epa-sec{padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--epa-borde)}
.epa .epa-sec h2{font-size:clamp(1.25rem,2.2vw,1.5rem)}
.epa .epa-baja{color:var(--epa-texto);margin-top:.35rem;max-width:58ch;font-size:1rem}

.epa .epa-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;
  font-size:1rem;padding:.9rem 1.2rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background .2s var(--epa-ease)}
.epa .epa-btn-azul,.epa a.epa-btn-azul{background:var(--epa-azul);color:#fff}
.epa .epa-btn-azul:hover{background:var(--epa-azul-osc)}
.epa .epa-btn-verde,.epa a.epa-btn-verde{background:var(--epa-verde);color:#fff}
.epa .epa-btn-verde:hover{background:var(--epa-verde-osc)}

.epa .epa-confia{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1rem;font-size:.875rem;color:var(--epa-texto)}
.epa .epa-confia span{display:inline-flex;align-items:center;gap:.35rem}
.epa .epa-confia svg{flex:none;color:var(--epa-verde-tinta)}

/* El botón de Google, compacto (checkout y "Mi cuenta"): el plugin lo arma de ancho completo, con 60px
   de alto y "Iniciar Sesión con Google". Queda el logo y "Google", porque lo
   demás ya lo dice la pregunta. Sus reglas pesan (0,3,2): de ahí lo largo. */
.epa .eph-google div.nsl-container{margin:0;padding:0}
.epa .eph-google div.nsl-container .nsl-container-buttons{display:flex;padding:0}
.epa .eph-google div.nsl-container .nsl-container-buttons a{flex:0 0 auto;width:auto;margin:0}
.epa .eph-google div.nsl-container .nsl-button-default{display:flex;align-items:center;height:2.1rem;
  padding:0 .8rem 0 .6rem;gap:.45rem;border:1px solid var(--epa-borde);border-radius:999px;box-shadow:none}
.epa .eph-google div.nsl-container .nsl-button-default div.nsl-button-svg-container{padding:0;display:flex}
.epa .eph-google div.nsl-container .nsl-button-default div.nsl-button-svg-container svg{width:18px;height:18px}
.epa .eph-google div.nsl-container .nsl-button-default div.nsl-button-label-container{margin:0;padding:0;
  font-size:0;line-height:1}
.epa .eph-google div.nsl-container .nsl-button-default div.nsl-button-label-container b{
  font-family:inherit;font-size:.875rem;font-weight:600;color:#1f1f1f}

/* La linea de arriba de un titulo, cuando va adentro del H1 (paginas de linea
   y Empresas): asi el H1 dice que se vende -"PC Gamer"- y se ve igual que el
   antetitulo suelto que habia antes. */
.epa h1 .epa-h1-kicker{display:block;margin:0 0 .15rem;font-size:1rem;font-weight:400;line-height:1.55;
  letter-spacing:normal;text-transform:none;color:var(--epa-texto)}

/* menu-alt.css */
/* ElectroPC · El encabezado, con el lenguaje del rediseño.
 *
 * Solo estilos: el marcado es del tema y tiene JavaScript colgado —el buscador
 * de FiboSearch, el cajón del carrito, el menú de celular, el interruptor de
 * tema—. Tocar el HTML rompería todo eso; acá se le cambia la piel y nada más.
 *
 * Se aplica **únicamente** bajo `body.eph-alt`, o sea dentro de la vista
 * previa. Un cliente sigue viendo el encabezado de siempre.
 *
 * `--mn-panel` es el unico opaco a proposito: la barra puede ser translucida
 * porque atras solo pasa la pagina al hacer scroll, pero el mega menu se abre
 * arriba del hero y con transparencia se leia el titulo por detras de los 47
 * enlaces.
 *
 * Los colores salen de tokens propios porque el encabezado vive fuera de
 * `.eph-home` y de `.epa`, donde están los de cada pantalla. Se declaran para
 * los dos modos siguiendo el interruptor del tema, que es `data-theme`.
 */

body.eph-alt{
  --mn-fondo:rgba(11,15,26,.88);
  --mn-borde:#253149;
  --mn-tinta:#E9EEF6;
  --mn-texto:#A2B0C6;
  --mn-azul:#3B82F6;
  --mn-campo:#151D35;
  --mn-panel:#0D1424;
  --mn-hover:rgba(255,255,255,.06);
}
[data-theme="light"] body.eph-alt,
body.eph-alt[data-theme="light"]{
  --mn-fondo:rgba(255,255,255,.94);
  --mn-borde:#E2E8F0;
  --mn-tinta:#0F172A;
  --mn-texto:#475569;
  --mn-campo:#F1F5F9;
  --mn-panel:#FFFFFF;
  --mn-hover:rgba(15,23,42,.05);
}

/* ── La barra de arriba ──
   Sin sombra: una línea de un píxel separa igual y no ensucia el borde del
   hero, que arranca justo debajo. */
body.eph-alt .site-header{
  background:var(--mn-fondo);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--mn-borde);
  box-shadow:none}
body.eph-alt .header-top{border:0;box-shadow:none;background:transparent}
body.eph-alt .header-top__inner{gap:1.2rem;padding-block:.7rem}

/* ── El buscador ──
   Es el mismo campo que los del catálogo: mismo radio, mismo borde, y un anillo
   azul al enfocar. Hoy era el único control del sitio con otra forma.

   Los selectores van largos a propósito. FiboSearch trae los suyos con cuatro
   clases y una hoja *inline* —`.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp
   input[type="search"].dgwt-wcas-search-input`—, que pesa más que un
   `.header-search input` y deja el campo blanco sobre el encabezado oscuro.
   Se le gana por peso y no con `!important`, que después no hay cómo pisar. */
body.eph-alt .header-search .dgwt-wcas-search-wrapp{max-width:none}
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp{
  background:transparent;border:0;box-shadow:none}
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover,
body.eph-alt .header-search input[type="search"]{
  height:2.75rem;
  background:var(--mn-campo);
  border:1px solid var(--mn-borde);
  border-radius:999px;
  color:var(--mn-tinta);
  font-size:1rem;
  padding-inline:2.6rem 1rem;
  box-shadow:none;
  transition:border-color .15s var(--ep-suave,ease),box-shadow .15s var(--ep-suave,ease)}
body.eph-alt .header-search input[type="search"]::placeholder{color:var(--mn-texto);opacity:1}
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus{
  outline:none;
  background:var(--mn-campo);
  border-color:var(--mn-azul);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mn-azul) 22%,transparent)}

/* La lupa vive adentro del campo y tiene que leerse sobre el fondo nuevo. */
body.eph-alt .header-search .dgwt-wcas-search-submit,
body.eph-alt .header-search .dgwt-wcas-search-submit:hover{
  background:transparent;border:0;color:var(--mn-texto)}
body.eph-alt .header-search .dgwt-wcas-ico-magnifier{fill:var(--mn-texto)}
body.eph-alt .header-search .dgwt-wcas-preloader,
body.eph-alt .header-search .dgwt-wcas-close{background:transparent}

/* ── Los botones de la derecha ──
   Redondos, del mismo tamaño, y con un fondo al pasar por encima: hoy no tenían
   ningún estado y no se sabía que eran botones hasta hacer clic. */
body.eph-alt .header-actions{gap:.3rem}
body.eph-alt .header-actions__btn,
body.eph-alt .header-actions > a{
  width:2.5rem;height:2.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  color:var(--mn-texto);
  background:transparent;border:0;
  transition:background .15s var(--ep-suave,ease),color .15s var(--ep-suave,ease)}
body.eph-alt .header-actions__btn:hover,
body.eph-alt .header-actions > a:hover{background:var(--mn-hover);color:var(--mn-tinta)}
body.eph-alt .header-actions__btn:focus-visible,
body.eph-alt .header-actions > a:focus-visible{
  outline:2px solid var(--mn-azul);outline-offset:2px}

/* "Mi cuenta" con texto es más ancho que el resto: se le deja su ancho. */
body.eph-alt .header-actions a[href*="mi-cuenta"],
body.eph-alt .header-actions a[href*="my-account"]{
  width:auto;gap:.4rem;padding-inline:.7rem;font-size:.875rem;font-weight:600}

/* El contador del carrito: chico, redondo y sobre el ícono. */
body.eph-alt .header-actions__cart-count{
  background:var(--mn-azul);color:#fff;
  min-width:1.15rem;height:1.15rem;line-height:1.15rem;
  font-size:.75rem;font-weight:600;border-radius:999px;
  border:2px solid var(--mn-fondo)}
body.eph-alt .header-actions__cart-count.is-empty{display:none}

/* ── La fila del menú ──
   Ojo con el alcance: adentro de esta fila cuelga el mega menú de "Ver todo",
   que son 47 enlaces de 11 y 12px. Un `.header-nav a` los agarra a todos y les
   pone el tamaño y el espaciado de una pestaña —el panel pasó de entrar en
   pantalla a medir 653px—. Por eso se apunta al hijo directo de la píldora. */
body.eph-alt .header-nav{border-top:1px solid var(--mn-borde);background:transparent}

/* Los ítems ya son píldoras (`.nav-pill`), que es la misma forma que usan los
   filtros del catálogo nuevo. No hay que reemplazarlas por otra cosa: alcanza
   con darles los colores del rediseño y un estado activo que se lea.

   El primer intento las cambiaba por un subrayado y les sacaba el relleno
   horizontal; quedaban seis palabras apretadas contra el borde. */
body.eph-alt .nav-pill{
  color:var(--mn-texto);
  border:1px solid transparent;
  font-size:.875rem;font-weight:600;
  transition:background .15s var(--ep-suave,ease),color .15s var(--ep-suave,ease),border-color .15s var(--ep-suave,ease)}
body.eph-alt .nav-pill:hover{
  color:var(--mn-tinta);
  background:var(--mn-hover);
  border-color:var(--mn-borde)}

/* Activo y desplegado abierto comparten estado: el azul del rediseño en vez
   del gris translúcido, que casi no se distinguía del hover. */
body.eph-alt .nav-pills__item.is-active .nav-pill,
body.eph-alt .nav-pill.is-active,
body.eph-alt .nav-pill--dropdown[aria-expanded="true"]{
  color:var(--mn-azul);
  background:color-mix(in srgb,var(--mn-azul) 13%,transparent);
  border-color:color-mix(in srgb,var(--mn-azul) 32%,transparent)}

/* El logo de ASUS es de la marca y no se le tocan los colores. */
body.eph-alt .nav-pill--asus,
body.eph-alt .nav-pill--asus:hover{color:#111;font-weight:400}

/* ── El mega menú ──
   Sus tamaños son suyos y no se tocan: entran 47 destinos en una pantalla y
   cualquier cosa más grande los deja afuera. Lo que se cambia es la piel —el
   borde, el radio y la sombra del resto del rediseño— y sobre todo que un
   enlace se ilumine al pasar, que hoy no pasaba nada. */
body.eph-alt .mega-dropdown{
  background:var(--mn-panel);
  border:1px solid var(--mn-borde);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(2,6,23,.45)}
body.eph-alt .mega-dropdown__header{border-bottom:1px solid var(--mn-borde)}
body.eph-alt .mega-col > a{color:var(--mn-tinta);letter-spacing:0}
body.eph-alt .mega-col__subs > li > a,
body.eph-alt .mega-col__subsubs > li > a{
  color:var(--mn-texto);border-radius:8px;
  transition:background .12s var(--ep-suave,ease),color .12s var(--ep-suave,ease)}
body.eph-alt .mega-col__subs > li > a:hover,
body.eph-alt .mega-col__subsubs > li > a:hover{
  background:var(--mn-hover);color:var(--mn-tinta)}

/* -- El logo en celular --
   El tema lo baja de 38 a 30px debajo de 768px de ancho, y deja 19px entre el
   logo, la lupa y los iconos: en un telefono de 375px el logo tenia 6px para
   crecer. Aca se achican esos espacios y el logo vuelve a la altura de
   escritorio, fija: no cambia al scrollear, porque un logo que cambia de tamaño
   corre los iconos justo cuando se los va a tocar.
   El alto sale del ancho libre: la pantalla menos los iconos, la lupa y los
   margenes (245px), dividido por la proporcion del logo (3,37). En un telefono
   angosto se achica solo en vez de empujar los iconos fuera de la barra. */
@media (max-width:768px){
  body.eph-alt .header-top__inner{gap:8px}
  body.eph-alt .site-branding img{height:clamp(26px,calc((100vw - 245px) / 3.37),38px)}
}

/* -- Ofertas, fuera del menu --
   La categoria no tiene ningun producto publicado: el link llevaba a una
   pagina vacia. Vuelve sacando esta regla cuando haya ofertas cargadas. */
body.eph-alt .site-header a[href*="/categoria/ofertas"],
body.eph-alt .mobile-nav a[href*="/categoria/ofertas"]{display:none}

/* -- Arriba del menu: WhatsApp y el local --
   El pie del tema sube entero (assets/menu-alt.js): la linea que lo separaba
   de la lista pasa de arriba a abajo. */
body.eph-alt .mobile-nav .mobile-nav__footer.eph-arriba{border-top:0;border-bottom:1px solid var(--mn-borde)}
body.eph-alt .mobile-nav .eph-menu-local{margin-top:.85rem;display:grid;gap:.45rem;font-size:14px;line-height:1.45;color:var(--mn-texto)}
body.eph-alt .mobile-nav .eph-menu-local p{display:flex;align-items:flex-start;gap:.5rem;margin:0}
body.eph-alt .mobile-nav .eph-menu-local svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--mn-azul)}
body.eph-alt .mobile-nav .eph-menu-local a{justify-self:start;font-weight:600;color:var(--mn-azul);text-decoration:none}

/* recorrido-linea.css */
/* ElectroPC · PC Gamer del lienzo "Recorrido simple" (26/9).
 *
 * Carga solo con el diseño nuevo prendido (`EPH_Vista::recorrido`) y en la
 * página de la línea, en lugar de home.css y linea-alt.css. El marcado lo arma
 * `EPH_LineaRecorrido` dentro de `.rl`.
 *
 * Solo claro, como el lienzo. Cada regla lleva `body.eph-recorrido` tres veces,
 * como las del checkout, la ficha y la home. */

body.eph-recorrido.eph-recorrido.eph-recorrido.eph-linea-alt{background:#F8FAFC!important;padding-bottom:76px}
body.eph-recorrido.eph-recorrido.eph-recorrido.eph-linea-alt .entry-content{padding-top:0;padding-bottom:0}
body.eph-recorrido.eph-recorrido.eph-recorrido.eph-linea-alt .whatsapp-float{display:none!important}

body.eph-recorrido.eph-recorrido.eph-recorrido .rl{
  --rl-fondo:#F8FAFC;
  --rl-gris:#F1F5F9;
  --rl-blanco:#FFFFFF;
  --rl-borde:#E2E8F0;
  --rl-campo:#CBD5E1;
  --rl-tinta:#0F172A;
  --rl-cuerpo:#334155;
  --rl-texto:#475569;
  --rl-suave:#64748B;
  --rl-azul:#0064FF;
  --rl-azul-texto:#0052D4;
  --rl-azul-claro:#DBEAFE;
  --rl-verde:#0B7038;
  --rl-verde-tinta:#05602C;
  --rl-verde-fondo:#DCFCE7;
  --color-text:var(--rl-tinta);--color-text-secondary:var(--rl-texto);--color-text-tertiary:var(--rl-suave);
  --color-text-link:var(--rl-azul-texto);--color-text-link-hover:var(--rl-azul-texto);
  font-family:Inter,system-ui,sans-serif;color:var(--rl-tinta);line-height:1.4;background:var(--rl-fondo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl *,
body.eph-recorrido.eph-recorrido.eph-recorrido .rl *::before,
body.eph-recorrido.eph-recorrido.eph-recorrido .rl *::after{box-sizing:border-box}
/* :where() no suma peso: el margen y el color de cada clase le ganan. */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl :where(h1,h2,p){margin:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl :is(h1,h2){color:var(--rl-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl a{color:var(--rl-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl :is(a,button):focus-visible{outline:3px solid color-mix(in srgb,var(--rl-azul) 45%,transparent);outline-offset:2px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-wrap{max-width:1148px;margin:0 auto;padding:0 16px}

/* Lo que va solo en pantalla chica o grande. Con !important: los links y
   botones traen su propio display y le ganaban. */
@media (max-width:759px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-solo-grande{display:none!important}
}
@media (min-width:760px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-solo-chica{display:none!important}
}

/* ── Botones ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-azul{background:var(--rl-azul);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-azul:hover{background:var(--rl-azul-texto);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-verde{background:var(--rl-verde);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-verde:hover{background:var(--rl-verde-tinta);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-borde{background:var(--rl-blanco);color:var(--rl-tinta);border:1px solid var(--rl-campo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-borde:hover{border-color:var(--rl-tinta);color:var(--rl-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-btn-gris{background:var(--rl-gris);color:var(--rl-tinta)}

/* ── Arriba ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cabeza{background:var(--rl-blanco);border-bottom:1px solid var(--rl-borde);padding:20px 0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-titulo{display:flex;flex-direction:column;gap:16px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-titulo > div{display:flex;flex-direction:column;gap:6px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-kicker{font-size:.875rem;font-weight:600;color:var(--rl-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cabeza h1{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:700;line-height:1.12;letter-spacing:-.02em}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-baja{font-size:.875rem;color:var(--rl-texto);line-height:1.45}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-duda .rl-btn,
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-duda-chica{border:1.5px solid var(--rl-azul);color:var(--rl-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-duda-chica{display:flex;width:100%;margin-top:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips{display:flex;gap:8px;margin:16px -16px 0;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips::-webkit-scrollbar{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips a{flex:0 0 auto;min-width:150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  background:var(--rl-blanco);border:1px solid var(--rl-borde);border-radius:12px;color:var(--rl-tinta)!important;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips a:hover{border-color:var(--rl-azul)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chip-cabeza{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;color:var(--rl-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chip-cabeza .rl-barras{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips a > b{font-size:.875rem;font-weight:700;line-height:1.3}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chip-desde{font-size:.75rem;color:var(--rl-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chip-desde b{font-weight:600;color:var(--rl-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-barras{display:flex;align-items:flex-end;gap:3px;height:20px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-barras span{width:6px;border-radius:999px;background:var(--rl-borde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-barras .rl-barra-si{background:var(--rl-azul)}

/* ── Los niveles ── */
/* Al llegar por el ancla (#rl-nivel-2, desde la home o la ficha) el título no
   queda abajo del encabezado fijo: mide 57px en el celular y 117px en la
   computadora. */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel{padding:28px 0 8px;scroll-margin-top:72px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-grilla{display:flex;flex-direction:column;gap:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-info{display:flex;flex-direction:column;gap:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-n{font-size:.75rem;font-weight:600;color:var(--rl-azul-texto);margin-bottom:4px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.01em;line-height:1.15}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-desde{display:flex;flex-direction:column;align-items:flex-end;flex:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-desde small{font-size:.75rem;color:var(--rl-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-desde b{font-size:1.25rem;font-weight:700;color:var(--rl-tinta);font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-texto{font-size:.875rem;color:var(--rl-texto);line-height:1.5}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-juega{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--rl-blanco);border:1px solid var(--rl-borde);border-radius:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-juega b{font-size:.75rem;font-weight:600;color:var(--rl-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-juega span{font-size:.875rem;color:var(--rl-tinta);line-height:1.45}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-pcs{display:flex;flex-direction:column;gap:12px;min-width:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pcs.rl-plegado .rl-pc-celda:nth-child(n+3){display:none}
/* La celda lleva la tarjeta y, con JavaScript, el botón "Vista previa" sobre
   la foto (recorrido-vista.css). */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-celda{position:relative;display:flex;min-width:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-celda > .rl-pc{flex:1;min-width:0}

/* Una PC */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc{display:flex;flex-direction:column;overflow:hidden;background:var(--rl-blanco);border:1px solid var(--rl-borde);border-radius:16px;
  color:var(--rl-tinta)!important;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc:hover{border-color:var(--rl-campo);box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-foto{position:relative;height:130px;border-bottom:1px solid var(--rl-borde);display:flex;align-items:center;justify-content:center}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-foto img{width:86%;height:88%;object-fit:contain;margin:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-sello{position:absolute;left:8px;top:8px;z-index:1;padding:3px 8px;border-radius:999px;background:var(--rl-azul-claro);color:var(--rl-azul-texto);
  font-size:.75rem;font-weight:600}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-etiqueta{background:#EEF4FF;color:#0052D4;box-shadow:0 1px 2px rgba(15,23,42,.08)}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rl-etiqueta{background:var(--rl-azul-claro)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rl-etiqueta{background:var(--rl-azul-claro)}}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-cuerpo{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-nombre{font-size:.875rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-specs{font-size:.75rem;color:var(--rl-texto);line-height:1.4}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-fps{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--rl-gris);font-size:.75rem;color:var(--rl-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-fps svg{flex:none;color:var(--rl-azul)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-fps b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-placa{padding:6px 10px;border-radius:8px;background:var(--rl-gris);font-size:.75rem;color:var(--rl-texto);line-height:1.35}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-precio{margin-top:auto;padding-top:6px;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-cuota{font-size:.75rem;color:var(--rl-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-pie{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-envio{padding:3px 8px;border-radius:999px;background:var(--rl-verde-fondo);color:var(--rl-verde-tinta);font-size:.75rem;font-weight:600}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-ver{display:inline-flex;align-items:center;gap:4px;font-size:.875rem;font-weight:600;color:var(--rl-azul-texto)}

body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-mas{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin:0;padding:0 16px;
  border:1px solid var(--rl-campo);border-radius:999px;background:var(--rl-blanco);color:var(--rl-tinta);font-family:inherit;font-size:1rem;cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-mas[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-mas svg{color:var(--rl-azul)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-mas b{font-weight:700}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-mas span{color:var(--rl-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-ver{align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:1rem;font-weight:600;text-decoration:none}

/* ── Abajo ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre{margin-top:32px;padding:20px;background:var(--rl-tinta);border-radius:16px;display:flex;flex-direction:column;gap:16px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre > div:first-child{display:flex;flex-direction:column;gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre h2{font-size:1.25rem;font-weight:700;color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre p{font-size:.875rem;color:#CBD5E1;line-height:1.5}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre-botones{display:flex;flex-direction:column;gap:10px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nota{margin:20px 0 32px;font-size:.875rem;color:var(--rl-texto);line-height:1.5}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nota b{font-weight:600;color:var(--rl-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-barra{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--rl-blanco);border-top:1px solid var(--rl-borde);box-shadow:0 -6px 18px rgba(15,23,42,.08)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-barra .rl-btn{flex:1}

/* ── Tablet ── */
@media (min-width:760px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-wrap{padding:0 24px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cabeza{padding:40px 0 28px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-titulo{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-baja{font-size:1rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-duda{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:.875rem;color:var(--rl-texto)}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;margin:28px 0 0;padding:0;overflow:visible}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips a{min-width:0;padding:16px 18px;border-radius:16px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chip-cabeza .rl-barras{display:flex}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chips a > b{font-size:1.125rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-chip-desde{font-size:.875rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pcs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  /* Tres por fila: la tercera se ve aunque el celular la haya plegado, y la cuarta no. */
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pcs.rl-plegado .rl-pc-celda:nth-child(3){display:flex}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pcs .rl-pc-celda:nth-child(n+4){display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl .rl-mas{display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:28px 36px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre h2{font-size:1.5rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre p{font-size:1rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre-botones{flex-direction:row;flex:none}
}

/* ── Computadora ── */
@media (min-width:1024px){
  body.eph-recorrido.eph-recorrido.eph-recorrido.eph-linea-alt{padding-bottom:0}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-barra{display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cabeza{padding:48px 0 32px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel{padding:48px 0 0;scroll-margin-top:92px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-grilla{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-info{gap:14px;padding-top:4px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-texto{font-size:1rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-desde-grande{align-items:flex-start;margin-top:6px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-desde-grande small{font-size:.875rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-desde-grande b{font-size:1.75rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nivel-info .rl-btn{align-self:flex-start}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pcs{gap:18px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-foto{height:180px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-cuerpo{padding:14px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-nombre{font-size:1rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-fps{font-size:.875rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-precio{font-size:1.25rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre{margin-top:56px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-nota{margin:24px 0 56px}
}

/* Las 3 cuotas sin interés con Visa o Mastercard (Payway, lienzo "Gamer" 30/9) */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-tres{font-size:.75rem;font-weight:700;line-height:1.3;color:#05602C}

/* ── 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-linea-alt{background:#0B1222!important}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rl{--rl-fondo:#0B1222;--rl-gris:#1B2440;--rl-blanco:#151D35;--rl-borde:#253149;--rl-campo:#3A4A66;--rl-tinta:#E9EEF6;--rl-cuerpo:#C9D3E1;--rl-texto:#A2B0C6;--rl-suave:#8B9AB3;--rl-azul:#3B82F6;--rl-azul-texto:#7FB0FF;--rl-azul-claro:#17305C;--rl-verde:#15954A;--rl-verde-tinta:#5FD98D;--rl-verde-fondo:#0F2E1E}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rl-etiqueta{color:#7FB0FF}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre{background:#22304F}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-tres{color:#5FD98D}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido.eph-linea-alt{background:#0B1222!important}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rl{--rl-fondo:#0B1222;--rl-gris:#1B2440;--rl-blanco:#151D35;--rl-borde:#253149;--rl-campo:#3A4A66;--rl-tinta:#E9EEF6;--rl-cuerpo:#C9D3E1;--rl-texto:#A2B0C6;--rl-suave:#8B9AB3;--rl-azul:#3B82F6;--rl-azul-texto:#7FB0FF;--rl-azul-claro:#17305C;--rl-verde:#15954A;--rl-verde-tinta:#5FD98D;--rl-verde-fondo:#0F2E1E}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rl-etiqueta{color:#7FB0FF}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rl-cierre{background:#22304F}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-tres{color:#5FD98D}}

/* recorrido-vista.css */
/* ElectroPC · "Vista previa" de una PC (lienzo del 29/9 a la tarde: tableros
 * GamerVista y GamerVistaEscritorio).
 *
 * El botón que va sobre la foto de cada tarjeta de PC (en la página de cada
 * línea y en el catálogo de PC) y el panel que abre: a la derecha, de 400px,
 * en la computadora; una hoja que sube desde abajo, al 88% del alto, en el
 * celular. El marcado lo arma `recorrido-vista.js`; los datos, `EPH_VistaPc`.
 * Sin JavaScript no hay botón ni panel.
 *
 * Cada regla lleva `body.eph-recorrido` tres veces, como las demás hojas del
 * diseño nuevo. */

body.eph-recorrido.eph-recorrido.eph-recorrido .vp,
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{
  --vp-fondo:#F8FAFC;
  --vp-gris:#F1F5F9;
  --vp-blanco:#FFFFFF;
  --vp-borde:#E2E8F0;
  --vp-campo:#CBD5E1;
  --vp-tinta:#0F172A;
  --vp-cuerpo:#334155;
  --vp-texto:#475569;
  --vp-suave:#64748B;
  --vp-azul:#0064FF;
  --vp-azul-texto:#0052D4;
  --vp-azul-claro:#DBEAFE;
  --vp-verde:#0B7038;
  --vp-suave-curva:cubic-bezier(.16,1,.3,1);
  font-family:Inter,system-ui,sans-serif}

/* ── La celda de la tarjeta del catálogo (la de la línea está en recorrido-linea.css) ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-celda{position:relative;display:flex;min-width:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-celda > .rp-pc{flex:1;min-width:0}

/* ── El botón sobre la foto ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;height:32px;margin:0;padding:0 10px;
  border:1px solid var(--vp-campo);border-radius:999px;background:rgba(255,255,255,.94);color:var(--vp-tinta);
  font-family:inherit;font-size:.75rem;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;box-shadow:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton:hover{border-color:var(--vp-tinta);background:var(--vp-blanco);color:var(--vp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton:focus-visible{outline:3px solid color-mix(in srgb,var(--vp-azul) 45%,transparent);outline-offset:2px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton svg{flex:none}
/* Abajo a la derecha de la foto, a 8px del borde. El alto de la foto es el de
   su hoja: 130/180px en la línea (recorrido-linea.css), 200/190px en el
   catálogo (recorrido-categoria.css). El botón mide 32px, y 34px desde 760px. */
body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-celda > .vp-boton{right:8px;top:90px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-celda > .vp-boton{right:8px;top:160px}

/* En el celular las tarjetas van de a 2: el botón es solo el ojo, un círculo
   de 32px (el nombre lo dice su aria-label). La foto del catálogo mide 118px. */
@media (max-width:599px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{justify-content:center;width:32px;padding:0}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton > span{display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-celda > .vp-boton{top:78px}
}

/* ── El velo y el panel ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp{position:fixed;inset:0;z-index:99990;color:var(--vp-tinta);line-height:1.4}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp *,
body.eph-recorrido.eph-recorrido.eph-recorrido .vp *::before,
body.eph-recorrido.eph-recorrido.eph-recorrido .vp *::after{box-sizing:border-box}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp :where(h2,h3,p,dl,dd,ul){margin:0;padding:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp :where(a,button):focus-visible{outline:3px solid color-mix(in srgb,var(--vp-azul) 45%,transparent);outline-offset:2px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-velo{position:absolute;inset:0;background:rgba(2,6,23,.4);animation:vp-velo .3s ease both}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-panel{position:absolute;left:0;right:0;bottom:0;height:88vh;height:88dvh;display:flex;flex-direction:column;
  background:var(--vp-blanco);border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -12px 32px rgba(15,23,42,.16);outline:0;
  animation:vp-hoja .42s var(--vp-suave-curva) both}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-manija{position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:999px;background:var(--vp-campo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp.vp-sale .vp-velo{animation:vp-velo-sale .22s ease-in both}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp.vp-sale .vp-panel{animation:vp-hoja-sale .22s ease-in both}

/* Arriba: "4 de 12", las flechas y la cruz. */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-cabeza{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 12px 10px 16px;border-bottom:1px solid var(--vp-borde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-pos{font-size:.875rem;color:var(--vp-texto);font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-flechas{display:flex;gap:6px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-flechas button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;
  border:1px solid var(--vp-campo);border-radius:50%;background:var(--vp-blanco);color:var(--vp-tinta);font:inherit;line-height:1;cursor:pointer;box-shadow:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-flechas button:hover{border-color:var(--vp-tinta);background:var(--vp-blanco);color:var(--vp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-flechas button:disabled{opacity:.35;cursor:default;pointer-events:none}

/* El medio, que se desplaza. Al cambiar de PC hace un fundido corto. */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-contenido{display:flex;flex-direction:column;gap:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-contenido.vp-fundido{animation:vp-fundido .28s var(--vp-suave-curva) both}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-foto{position:relative;flex:none;height:190px;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--vp-borde);border-radius:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-foto img{width:86%;height:88%;margin:0;object-fit:contain}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-sello{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:var(--vp-azul-claro);color:var(--vp-azul-texto);
  font-size:.75rem;font-weight:600}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-titulo{display:flex;flex-direction:column;gap:5px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-titulo h2{font-size:1.125rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--vp-tinta);outline:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-uso{font-size:.875rem;color:var(--vp-texto);line-height:1.45}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-trae,
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-fps{display:flex;flex-direction:column}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-contenido h3{margin-bottom:4px;font-size:.875rem;font-weight:600;line-height:1.3;color:var(--vp-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-trae dl > div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--vp-gris);font-size:.875rem}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-trae dt{flex:none;color:var(--vp-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-trae dd{min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-fps h3{margin-bottom:6px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-fps ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;list-style:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-fps li{margin:0;padding:8px 6px;border-radius:12px;background:var(--vp-gris);text-align:center;font-size:.75rem;color:var(--vp-texto);line-height:1.3}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-fps li b{display:block;font-size:1.125rem;font-weight:700;color:var(--vp-tinta);font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-plata{display:flex;flex-direction:column;gap:3px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-precio{font-size:1.75rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-tres{font-size:1rem;font-weight:700;line-height:1.3;color:var(--vp-verde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-cuota{font-size:1rem;color:var(--vp-verde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-cuota b{font-weight:700}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-recargo{font-size:.75rem;color:var(--vp-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-forma{font-size:.875rem;color:var(--vp-texto)}
/* "Ver todas las cuotas": los planes de la ficha, la de 18 en verde claro. */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes{margin-top:4px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-ver{padding:0;border:0;background:none;font:inherit;font-size:.875rem;font-weight:600;color:var(--vp-azul-texto);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista{margin-top:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista ul{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--vp-borde);border-radius:12px;overflow:hidden}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:8px 12px;font-size:.875rem;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista li + li{border-top:1px solid var(--vp-borde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista li small{font-size:.75rem;color:var(--vp-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista li.vp-plan-largo{background:#EAF8F0;color:var(--vp-verde);font-weight:600}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-envio{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--vp-fondo);border:1px solid var(--vp-borde);border-radius:12px;
  font-size:.875rem;color:var(--vp-cuerpo);line-height:1.35}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-envio svg{flex:none;color:var(--vp-azul)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-aviso{font-size:.875rem;color:var(--vp-texto);line-height:1.45}
/* Mientras llegan los datos: la foto y el nombre de la tarjeta, y el resto en gris. */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-hueso{height:14px;border-radius:8px;background:var(--vp-gris)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-huesos{display:flex;flex-direction:column;gap:10px}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-huesos .vp-hueso:nth-child(2n){width:70%}

/* Abajo, fijos: agregar, la ficha y WhatsApp. */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-pie{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--vp-borde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-pie form{margin:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-pie form[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-azul,
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-borde{display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:0 16px;border-radius:999px;
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-azul{height:48px;border:0;background:var(--vp-azul);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-azul:hover{background:var(--vp-azul-texto);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-azul[aria-busy="true"]{opacity:.7;cursor:progress}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-borde{height:46px;border:1.5px solid var(--vp-azul);background:var(--vp-blanco);color:var(--vp-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-borde:hover{background:var(--vp-fondo);color:var(--vp-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-wa{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;color:var(--vp-verde);font-size:.875rem;font-weight:600;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-wa:hover{color:var(--vp-verde);text-decoration:underline}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp .vp-wa[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-error{font-size:.875rem;color:#B91C1C;text-align:center;line-height:1.4}
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-error[hidden]{display:none}

/* Solo para lectores de pantalla. */
body.eph-recorrido.eph-recorrido.eph-recorrido .vp-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Tablet y computadora: el panel a la derecha, de 400px ── */
@media (min-width:760px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{height:34px;padding:0 12px;font-size:.875rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-celda > .vp-boton{top:88px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-celda > .vp-boton{top:158px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-panel{left:auto;top:0;width:400px;max-width:100%;height:100%;border-left:1px solid var(--vp-borde);border-top-left-radius:0;border-top-right-radius:0;
    box-shadow:-12px 0 32px rgba(15,23,42,.12);animation-name:vp-lado}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp.vp-sale .vp-panel{animation-name:vp-lado-sale}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-manija{display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-cabeza{padding:12px 12px 12px 18px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-cuerpo{padding:16px 18px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-foto{height:220px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-titulo h2{font-size:1.25rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-pie{padding:12px 18px 14px}
}

@media (min-width:1024px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rl-pc-celda > .vp-boton{top:138px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-celda > .vp-boton{top:148px}
}

@keyframes vp-velo{from{opacity:0}to{opacity:1}}
@keyframes vp-velo-sale{from{opacity:1}to{opacity:0}}
@keyframes vp-hoja{from{transform:translateY(104%)}to{transform:none}}
@keyframes vp-hoja-sale{from{transform:none}to{transform:translateY(104%)}}
@keyframes vp-lado{from{transform:translateX(104%)}to{transform:none}}
@keyframes vp-lado-sale{from{transform:none}to{transform:translateX(104%)}}
@keyframes vp-fundido{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* Con "reducir movimiento" nada se mueve: aparece y se va. */
@media (prefers-reduced-motion:reduce){
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-velo,
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-panel,
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp-contenido.vp-fundido,
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp.vp-sale .vp-velo,
  body.eph-recorrido.eph-recorrido.eph-recorrido .vp.vp-sale .vp-panel{animation:none}
}

/* ── Modo oscuro (generado por herramientas/gen_recorrido_oscuro.py: no editar a mano) ── */
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .vp,
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{--vp-fondo:#0B1222;--vp-gris:#1B2440;--vp-blanco:#151D35;--vp-borde:#253149;--vp-campo:#3A4A66;--vp-tinta:#E9EEF6;--vp-cuerpo:#C9D3E1;--vp-texto:#A2B0C6;--vp-suave:#8B9AB3;--vp-azul:#3B82F6;--vp-azul-texto:#7FB0FF;--vp-azul-claro:#17305C;--vp-verde:#15954A}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{background:rgba(21,29,53,.94)}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista li.vp-plan-largo{background:#0F2E1E}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .vp-error{color:#F87171}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .vp,
html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{--vp-fondo:#0B1222;--vp-gris:#1B2440;--vp-blanco:#151D35;--vp-borde:#253149;--vp-campo:#3A4A66;--vp-tinta:#E9EEF6;--vp-cuerpo:#C9D3E1;--vp-texto:#A2B0C6;--vp-suave:#8B9AB3;--vp-azul:#3B82F6;--vp-azul-texto:#7FB0FF;--vp-azul-claro:#17305C;--vp-verde:#15954A}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .vp-boton{background:rgba(21,29,53,.94)}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .vp-planes-lista li.vp-plan-largo{background:#0F2E1E}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .vp-error{color:#F87171}}

/* recorrido-categoria.css */
/* ElectroPC · La categoría y el catálogo del lienzo "Recorrido simple" (26/9).
 *
 * Carga solo con el diseño nuevo prendido (`EPH_Vista::recorrido`), en las
 * páginas de categoría y en /catalogo-alt/, en lugar de home.css, catalogo.css
 * y piezas.css. El marcado lo arman `EPH_CategoriaRecorrido` (componentes) y
 * `EPH_CatalogoRecorrido` (PC, `.rp-de-pc`) dentro de `.rp`.
 *
 * En el celular la cabeza va arriba con los filtros; desde 1024px la cabeza
 * se deshace (`display: contents`) y sus piezas se acomodan en dos columnas:
 * los filtros al costado y la lista al lado.
 *
 * Solo claro, como el lienzo. Cada regla lleva `body.eph-recorrido` tres veces,
 * como las de la home, la línea y la ficha. */

body.eph-recorrido.eph-recorrido.eph-recorrido.eph-rp{background:#F8FAFC!important}
body.eph-recorrido.eph-recorrido.eph-recorrido.eph-rp .entry-content{padding-top:0;padding-bottom:0}

body.eph-recorrido.eph-recorrido.eph-recorrido .rp{
  --rp-fondo:#F8FAFC;
  --rp-gris:#F1F5F9;
  --rp-blanco:#FFFFFF;
  --rp-borde:#E2E8F0;
  --rp-campo:#CBD5E1;
  --rp-tinta:#0F172A;
  --rp-cuerpo:#334155;
  --rp-texto:#475569;
  --rp-suave:#64748B;
  --rp-apagado:#94A3B8;
  --rp-azul:#0064FF;
  --rp-azul-texto:#0052D4;
  --rp-azul-claro:#DBEAFE;
  --rp-azul-fondo:#EFF6FF;
  --rp-azul-tinta:#1E3A8A;
  --rp-verde:#0B7038;
  --rp-verde-tinta:#05602C;
  --rp-verde-fondo:#EAF8F0;
  --color-text:var(--rp-tinta);--color-text-secondary:var(--rp-texto);--color-text-tertiary:var(--rp-suave);
  --color-text-link:var(--rp-azul-texto);--color-text-link-hover:var(--rp-azul-texto);
  max-width:1148px;margin:0 auto;padding:0 0 56px;
  font-family:Inter,system-ui,sans-serif;color:var(--rp-tinta);line-height:1.4}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp *,
body.eph-recorrido.eph-recorrido.eph-recorrido .rp *::before,
body.eph-recorrido.eph-recorrido.eph-recorrido .rp *::after{box-sizing:border-box}
/* :where() no suma peso: el margen y el color de cada clase le ganan. */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp :where(h1,p,fieldset,legend,form){margin:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp h1{color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp a{color:var(--rp-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp :is(a,button,input,select):focus-visible{outline:3px solid color-mix(in srgb,var(--rp-azul) 45%,transparent);outline-offset:2px}
@media (max-width:759px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-solo-grande{display:none!important}
}

/* ── La cabeza: dónde estás, cuántos hay y los filtros ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-cabeza{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;
  background:var(--rp-blanco);border-bottom:1px solid var(--rp-borde)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-migas{display:flex;flex-wrap:wrap;gap:6px;font-size:.875rem;color:var(--rp-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-migas a{text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-migas a:hover{text-decoration:underline}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-titulo{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-titulo h1{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:700;line-height:1.12;letter-spacing:-.02em}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-cuenta{font-size:.875rem;color:var(--rp-texto);white-space:nowrap}

body.eph-recorrido.eph-recorrido.eph-recorrido .rp-lado{display:flex;flex-direction:column;gap:12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grupo{display:flex;flex-direction:column;gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grupo-t{font-size:.875rem;font-weight:600;color:var(--rp-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-chips{display:flex;flex-wrap:wrap;gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-chip{padding:8px 13px;border-radius:999px;border:1px solid var(--rp-campo);background:var(--rp-blanco);
  color:var(--rp-tinta);font-size:.875rem;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;transition:border-color .15s,background-color .15s}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-chip:hover{border-color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-chip[aria-current]{background:var(--rp-tinta);border-color:var(--rp-tinta);color:#FFFFFF}

/* El botón que abre marca y precio, y el orden */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-botones{display:flex;gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-abrir{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0;padding:0 14px;
  border:1px solid var(--rp-campo);border-radius:999px;background:var(--rp-blanco);color:var(--rp-tinta);font:inherit;font-size:.875rem;font-weight:600;white-space:nowrap;cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-abrir:hover,
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-abrir[aria-expanded="true"]{border-color:var(--rp-tinta);background:var(--rp-blanco);color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-puestos{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--rp-azul);color:#FFFFFF;font-size:.75rem;font-weight:700}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-orden{display:flex;align-items:center;gap:6px;height:40px;margin:0;padding:0 14px;border:1px solid var(--rp-campo);
  border-radius:999px;background:var(--rp-blanco);font-size:.875rem;white-space:nowrap;cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-orden > span{color:var(--rp-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-orden select{appearance:none;-webkit-appearance:none;height:100%;min-height:0;width:auto;margin:0;padding:0 18px 0 0;border:0;border-radius:0;box-shadow:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
  color:var(--rp-tinta);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}

/* El panel de marca y precio. Sin JavaScript queda abierto. */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-panel{display:flex;flex-direction:column;gap:16px;padding:14px;border:1px solid var(--rp-borde);border-radius:16px;background:var(--rp-blanco)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-panel[hidden]{display:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp :is(.rp-marcas,.rp-precio){min-width:0;padding:0;border:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp :is(.rp-marcas,.rp-precio) legend{float:left;width:100%;margin:0 0 8px;padding:0;font-size:.875rem;font-weight:700;color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-marcas-lista{clear:both;display:flex;flex-direction:column;max-height:264px;overflow-y:auto}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-marcas-lista label{display:flex;align-items:center;gap:10px;margin:0;padding:5px 0;font-size:.875rem;font-weight:400;color:var(--rp-tinta);cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-marcas-lista input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-marcas-lista small{margin-left:auto;padding-right:4px;font-size:.75rem;color:var(--rp-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-precio > div{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-precio input{width:100%;height:40px;margin:0;padding:0 12px;border:1px solid var(--rp-campo);border-radius:12px;
  background:var(--rp-blanco);color:var(--rp-tinta);font:inherit;font-size:1rem;box-shadow:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-precio input::placeholder{color:var(--rp-suave);opacity:1}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-aplicar{height:44px;margin:0;border:0;border-radius:999px;background:var(--rp-azul);color:#FFFFFF;
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-aplicar:hover{background:var(--rp-azul-texto);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-limpiar{align-self:flex-start;font-size:.875rem;font-weight:600;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-limpiar:hover{text-decoration:underline}

/* ── La ayuda de cada tipo ("¿SATA o M.2?") ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-ayuda{display:flex;flex-direction:column;gap:10px;margin:14px 16px 0;padding:14px;
  border:1px solid var(--rp-azul-claro);border-radius:16px;background:var(--rp-azul-fondo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-ayuda-uno{display:flex;flex-direction:column;gap:3px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-ayuda-uno b{font-size:1rem;font-weight:700}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-ayuda :is(.rp-ayuda-uno span,.rp-ayuda-dos){font-size:.875rem;line-height:1.45;color:var(--rp-cuerpo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-ayuda-wa{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.875rem;font-weight:600;
  color:var(--rp-verde);text-decoration:none;white-space:nowrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-ayuda-wa:hover{color:var(--rp-verde-tinta);text-decoration:underline}

/* ── La lista ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-lista{padding:14px 16px 0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grilla{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px}
/* Filtrar sin recargar (recorrido-categoria.js): mientras llega la lista nueva
   se aclara un poco, y solo si tarda. Las tarjetas que no van quedan un momento
   encima, donde estaban, mientras se desvanecen. */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp[aria-busy="true"] .rp-grilla{opacity:.6;transition:opacity .2s ease .15s}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grilla > *{position:relative;z-index:1}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-grilla > .rp-sale{position:absolute;z-index:0;margin:0;pointer-events:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-aviso{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp[aria-busy="true"] .rp-grilla{transition:none}
}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--rp-borde);border-radius:16px;background:var(--rp-blanco);
  transition:border-color .15s,box-shadow .15s}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-card:hover{border-color:var(--rp-campo);box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-foto{display:flex;align-items:center;justify-content:center;height:130px;border-bottom:1px solid var(--rp-borde);background:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-foto img{width:84%;height:86%;margin:0;object-fit:contain}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-cuerpo{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 11px 12px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-nombre{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;
  font-size:.875rem;font-weight:600;line-height:1.3;color:var(--rp-tinta);text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-nombre:hover{color:var(--rp-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-datos{display:flex;flex-wrap:wrap;gap:5px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-datos span{padding:3px 8px;border-radius:999px;background:var(--rp-gris);color:var(--rp-cuerpo);font-size:.75rem;font-weight:600}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-empuje{flex:1}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-monto{font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-cuota{font-size:.75rem;color:var(--rp-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-agregar{margin:4px 0 0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-agregar button,
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-ver-pieza{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;margin:0;padding:0 10px;
  border:1.5px solid var(--rp-azul);border-radius:999px;background:var(--rp-blanco);color:var(--rp-azul-texto);font:inherit;font-size:.875rem;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-agregar button:hover,
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-ver-pieza:hover{background:var(--rp-azul);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-agregar button[aria-busy="true"]{opacity:.7;cursor:progress}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-agregar.rp-agregado button{border-color:var(--rp-verde);background:var(--rp-verde);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-error{font-size:.75rem;color:#B91C1C;line-height:1.35}

body.eph-recorrido.eph-recorrido.eph-recorrido .rp-vacio{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px;
  border:1px solid var(--rp-borde);border-radius:16px;background:var(--rp-blanco);text-align:center}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-vacio b{font-size:1rem;font-weight:700}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-vacio a{font-size:.875rem;font-weight:600;text-decoration:none}

body.eph-recorrido.eph-recorrido.eph-recorrido .rp-mas{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:22px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-mas > span{font-size:.875rem;color:var(--rp-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-mas-boton{display:inline-flex;align-items:center;height:48px;padding:0 28px;border:1px solid var(--rp-campo);border-radius:999px;
  background:var(--rp-blanco);color:var(--rp-tinta);font-size:1rem;font-weight:600;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-mas-boton:hover{border-color:var(--rp-tinta);color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-mas-boton[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ── El catálogo de PC (`.rp-de-pc`): la cabeza va sobre el gris, sin migas ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-cabeza{gap:14px;padding:20px 16px 0;border:0;background:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-titulo{flex-direction:column;align-items:flex-start;gap:4px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-cuenta{white-space:normal}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--rp-azul-claro)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir > b{font-size:1rem;font-weight:700;color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir > p{font-size:.875rem;line-height:1.45;color:var(--rp-azul-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir-botones{display:flex;gap:8px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir-botones a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 12px;
  border-radius:8px;font-size:.875rem;font-weight:700;text-decoration:none;white-space:nowrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir-azul{background:var(--rp-azul);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir-azul:hover{background:var(--rp-azul-texto);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir-wa{background:var(--rp-blanco);color:var(--rp-verde-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir-wa:hover{background:var(--rp-verde-fondo);color:var(--rp-verde-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc :is(.rp-abrir,.rp-orden){flex:1;height:44px;border-radius:8px;justify-content:center}
/* El lienzo dice solo "Menor precio": el botón de al lado ya dice que son filtros. */
@media (max-width:1023px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-orden > span{display:none}
}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-lista{padding-top:16px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-grilla{grid-template-columns:minmax(0,1fr);gap:14px}

body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-pc{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--rp-borde);border-radius:12px;background:var(--rp-blanco);
  color:var(--rp-tinta);text-decoration:none;transition:border-color .15s,box-shadow .15s}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-pc:hover{border-color:var(--rp-campo);box-shadow:0 8px 24px rgba(15,23,42,.06);color:var(--rp-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-foto{position:relative;display:flex;align-items:center;justify-content:center;height:200px;background:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-foto img{width:80%;height:88%;margin:0;object-fit:contain}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-sello{position:absolute;left:10px;top:10px;z-index:1;padding:4px 9px;border-radius:999px;background:var(--rp-azul-claro);
  color:var(--rp-azul-texto);font-size:.75rem;font-weight:700}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-cuerpo{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-nombre{font-size:1rem;font-weight:700;line-height:1.25}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-specs{font-size:.875rem;color:var(--rp-texto);line-height:1.4}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-precio{margin-top:auto;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-cuota{font-size:.875rem;color:var(--rp-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-tres{font-size:.875rem;font-weight:700;line-height:1.3;color:#05602C}
body.eph-recorrido.eph-recorrido.eph-recorrido .rp-envio{align-self:flex-start;padding:4px 9px;border-radius:999px;background:var(--rp-verde-fondo);color:var(--rp-verde-tinta);
  font-size:.75rem;font-weight:700}

/* ── Celular: las PC de a 2, como los componentes (lienzo, tablero Catalogo; Martín, 2/10) ── */
@media (max-width:599px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-pc{border-radius:16px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-foto{height:118px;border-bottom:1px solid var(--rp-borde)}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-foto img{width:88%;height:88%}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-sello{left:6px;top:6px;padding:3px 7px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-cuerpo{gap:5px;padding:10px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-nombre{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.875rem;font-weight:600;line-height:1.3}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-specs{font-size:.75rem;line-height:1.35}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-precio{font-size:1.125rem}
  /* "Hasta 18 cuotas fijas con tarjeta" no entra en una línea a 360px: baja a
     dos antes que cortarse con puntos. */
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-cuota{font-size:.75rem;line-height:1.3}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-tres{font-size:.75rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-envio{padding:3px 8px}
}

/* ── Tableta: más columnas ── */
@media (min-width:600px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Computadora: los filtros al costado ── */
@media (min-width:1024px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp{--rp-orden-arriba:62px;position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;column-gap:28px;align-items:start;padding:24px 16px 64px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc{--rp-orden-arriba:28px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-cabeza{display:contents}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-migas{grid-column:1 / -1;grid-row:1}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-titulo{grid-column:1 / -1;grid-row:2;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:14px;
    margin-top:8px;padding-right:250px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-cuenta{font-size:1rem}

  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-lado{grid-column:1;grid-row:3 / span 2;align-self:start;gap:16px;margin-top:20px;padding:18px;
    border:1px solid var(--rp-borde);border-radius:16px;background:var(--rp-blanco)}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-botones{display:contents}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-abrir{display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-orden{position:absolute;top:var(--rp-orden-arriba);right:16px;flex:none;height:40px;border-radius:999px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-panel,
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-panel[hidden]{display:flex;gap:16px;padding:0;border:0;border-radius:0;background:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grupo-t,
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp :is(.rp-marcas,.rp-precio) legend{font-size:.875rem;font-weight:700;color:var(--rp-tinta)}
  /* Una línea entre grupo y grupo, como el lienzo */
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-lado > .rp-grupo ~ :is(.rp-grupo,.rp-panel),
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-panel > .rp-grupo ~ :is(.rp-grupo,fieldset),
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-panel > fieldset ~ fieldset{padding-top:16px;border-top:1px solid var(--rp-borde)}
  /* Al costado el botón no compite con la lista: queda en borde. */
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-aplicar{height:40px;border:1.5px solid var(--rp-azul);background:var(--rp-blanco);color:var(--rp-azul-texto);font-size:.875rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-aplicar:hover{background:var(--rp-azul);color:#FFFFFF}

  body.eph-recorrido.eph-recorrido.eph-recorrido .rp :is(.rp-ayuda,.rp-elegir){grid-column:2;grid-row:3;margin:20px 0 0}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-ayuda{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:24px;padding:18px 22px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t botones" "p botones";
    align-items:center;column-gap:24px;row-gap:3px;padding:18px 22px;border-radius:16px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir > b{grid-area:t}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir > p{grid-area:p}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-elegir-botones{grid-area:botones}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-elegir-botones a{flex:none;padding:0 20px;border-radius:999px}

  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-lista{grid-column:2;grid-row:4;padding:18px 0 0}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grilla,
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-de-pc .rp-grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-foto{height:170px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-cuerpo{padding:14px 16px 16px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-nombre{min-height:0;font-size:1rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-monto{font-size:1.25rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-agregar button,
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-ver-pieza{height:42px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-foto{height:190px}
}
@media (min-width:1200px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rp-grilla{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ── 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-rp{background:#0B1222!important}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rp{--rp-fondo:#0B1222;--rp-gris:#1B2440;--rp-blanco:#151D35;--rp-borde:#253149;--rp-campo:#3A4A66;--rp-tinta:#E9EEF6;--rp-cuerpo:#C9D3E1;--rp-texto:#A2B0C6;--rp-suave:#8B9AB3;--rp-apagado:#6B7A94;--rp-azul:#3B82F6;--rp-azul-texto:#7FB0FF;--rp-azul-claro:#17305C;--rp-azul-fondo:#13213F;--rp-azul-tinta:#BFD7FF;--rp-verde:#15954A;--rp-verde-tinta:#5FD98D;--rp-verde-fondo:#0F2E1E}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-chip[aria-current]{background:#E9EEF6;color:#0B1222}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rp-error{color:#F87171}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-tres{color:#5FD98D}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido.eph-rp{background:#0B1222!important}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rp{--rp-fondo:#0B1222;--rp-gris:#1B2440;--rp-blanco:#151D35;--rp-borde:#253149;--rp-campo:#3A4A66;--rp-tinta:#E9EEF6;--rp-cuerpo:#C9D3E1;--rp-texto:#A2B0C6;--rp-suave:#8B9AB3;--rp-apagado:#6B7A94;--rp-azul:#3B82F6;--rp-azul-texto:#7FB0FF;--rp-azul-claro:#17305C;--rp-azul-fondo:#13213F;--rp-azul-tinta:#BFD7FF;--rp-verde:#15954A;--rp-verde-tinta:#5FD98D;--rp-verde-fondo:#0F2E1E}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rp .rp-chip[aria-current]{background:#E9EEF6;color:#0B1222}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rp-error{color:#F87171}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rp-pc-tres{color:#5FD98D}}