/* style.css */
/*
Theme Name: ElectroPC
Theme URI: https://electropc.com
Author: ElectroPC
Author URI: https://electropc.com
Description: Tema personalizado para ElectroPC - Tienda de computación y electrónica.
Version: 2.0.77
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: electropc
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

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