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