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