/* 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}}