/* Hardmaster · la piel de toda la web (propuesta aprobada por Martín el 31/10).
 *
 * Lienzo: "Rediseño Hardmaster". Noche #0B0F1A y lima #7FFF24, títulos en
 * Barlow Condensed en cursiva (como las letras del logo), texto en DM Sans,
 * esquinas cortadas en diagonal en los botones de comprar y la cinta lima
 * debajo del héroe. En blanco el lima queda para fondos (botones, cinta, el
 * bloque "Armala a tu medida") y el texto y los íconos van en verde oscuro
 * #2E6A00, porque lima sobre blanco no se lee.
 *
 * El azul de ElectroPC escrito a mano en las demás hojas lo cambia
 * `hardmaster-recolor.css` (generado). Esta hoja gana por peso: `html:root:not(#hm)` suma
 * el de un id, y la clase `hm-skin` va repetida, porque algunas hojas se imprimen al pie.
 */

/* ── Tokens ── */
html:root:not(#hm) body.hm-skin.hm-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra{
  --hm-noche:#0B0F1A;--hm-lima:#7FFF24;--hm-lima2:#9DFF57;--hm-sobrelima:#0B1A00;--hm-verde:#2E6A00;
  --hm-acento:#2E6A00;--hm-corte:12px;
  --mu-azul:#7FFF24;--mu-azul-texto:#2E6A00;--mu-azul-fondo:#F1FBE6;--mu-azul-pastilla:#E4F7CF;
  --mu-info:#F1FBE6;--mu-halo:#D8F5B8;--mu-linea:rgba(46,106,0,.35);--mu-tinta:#0B0F1A;
  --font-primary:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra{
  --hm-acento:#9DFF57;
  --mu-blanco:#121A2D;--mu-dato:#18223A;--mu-segmento:#18223A;--mu-gris:#18223A;--mu-boton-gris:#18223A;
  --mu-azul:#7FFF24;--mu-azul-texto:#9DFF57;--mu-azul-fondo:#16240F;--mu-azul-pastilla:#1F3312;
  --mu-info:#16240F;--mu-halo:#2A4A12;--mu-linea:rgba(157,255,87,.4);
  --mu-tinta:#EEF3FA;--mu-texto:#A3B0C4;--mu-suave:#8D9AB0;--mu-campo:#33415F;
  --mu-borde:#26324F;--mu-borde-suave:#1E2945;
  background:#0B0F1A;
}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin :is(.rh,.rl,.rp,.rc,.ra,.eph-rf,.eph-rc,.site-main){background-color:transparent}

/* ── Letras ── */
html:root:not(#hm) body.hm-skin.hm-skin,
html:root:not(#hm) body.hm-skin.hm-skin :is(p,a,span,li,button,input,select,textarea,label,small,strong,b,div,td,th,summary,figcaption,blockquote,dd,dt){
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html:root:not(#hm) body.hm-skin.hm-skin :is(h1,h2,h3,h4){font-family:'Barlow Condensed','DM Sans',sans-serif;letter-spacing:0}
html:root:not(#hm) body.hm-skin.hm-skin :is(h2,h3,h4){font-weight:800}
/* Los títulos de sección, en cursiva y mayúsculas como el logo */
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-sec-cabeza,.eph-mu-sec-cabeza,.rh-medida-cabeza,.eph-mu-local-cabeza,.eph-mu-faq-lado,.eph-mu-resenas-lado,.rh-ayudamos,.rh-porque,.rh-componentes,.rh-compra,.rl-cabeza,.rp-cabeza) > :is(h2,div > h2),
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-ayudamos,.rh-porque,.rh-compra,.rh-componentes,.rh-usos) h2,
html:root:not(#hm) body.hm-skin.hm-skin main h1{
  font-weight:900;font-style:italic;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
html:root:not(#hm) body.hm-skin.hm-skin .rh :is(.rh-sec-cabeza,.eph-mu-sec-cabeza,.rh-medida-cabeza,.eph-mu-local-cabeza,.eph-mu-faq-lado,.eph-mu-resenas-lado) h2,
html:root:not(#hm) body.hm-skin.hm-skin .rh :is(.rh-ayudamos,.rh-porque,.rh-compra,.rh-componentes,.rh-usos) h2{font-size:clamp(2.5rem,1.6rem + 3vw,4rem)}
/* Precios en la letra de los títulos */
html:root:not(#hm) body.hm-skin.hm-skin :is(.rl-pc-precio,.eph-mu-precio,.rp-pc-precio,.eph-rf-precio,.vs-precio,.eph-mu-precio-caja strong){font-family:'Barlow Condensed','DM Sans',sans-serif;font-weight:800;letter-spacing:0}
/* Lo que pide la letra del cuerpo aunque sea un título chico */
html:root:not(#hm) body.hm-skin.hm-skin .rh-kicker{font-family:'DM Sans',sans-serif;text-transform:none;font-style:normal}

/* ── Encabezado ── */
html:root:not(#hm) body.hm-skin.hm-skin .site-header{background:#FFFFFF}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin .site-header{background:#0B0F1A;border-bottom:1px solid #26324F}
html:root:not(#hm) body.hm-skin.hm-skin .site-header .nav-pill{font-family:'Barlow Condensed','DM Sans',sans-serif;font-weight:700;font-size:1.125rem;letter-spacing:.01em}
html:root:not(#hm) body.hm-skin.hm-skin .site-header .nav-pill.rm-encontra-pill{background:#7FFF24!important;color:#0B1A00!important;border-radius:0!important;box-shadow:none!important;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
html:root:not(#hm) body.hm-skin.hm-skin .site-header .nav-pill.rm-encontra-pill:hover{background:#9DFF57!important}
html:root:not(#hm) body.hm-skin.hm-skin .site-header .nav-pill.rm-encontra-pill svg{color:#0B1A00!important}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin .site-header .nav-pill:not(.rm-encontra-pill){color:#D3DCEA}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin .site-header .nav-pill:not(.rm-encontra-pill):hover{color:#9DFF57}
html:root:not(#hm) body.hm-skin.hm-skin .site-header .site-branding img{max-height:64px;width:auto}
/* La terminación nueva cambia el logo por el de ElectroPC en oscuro: acá va el de Hardmaster siempre */
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin .site-header .site-branding img{content:normal!important;filter:none!important;mix-blend-mode:normal!important}

/* El checkout pasaba el logo a blanco (filtro pensado para el de ElectroPC) */
html:root:not(#hm) body.hm-skin.hm-skin :is(.eph-rc-logo,.site-branding,.eph-mu-pie-marca,.eph-co-logo) img{filter:none!important}
/* El botón de confirmar el pedido */
html:root:not(#hm) body.hm-skin.hm-skin #place_order{background:#7FFF24!important;color:#0B1A00!important;border-color:#7FFF24!important}
html:root:not(#hm) body.hm-skin.hm-skin #place_order:hover{background:#9DFF57!important}

/* ── Botones de comprar: lima con esquinas cortadas ── */
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-btn-azul,.eph-mu-boton-azul,.rl-btn-azul,.vp-boton,.eph-rf-boton,.eph-rf-compra button.single_add_to_cart_button,.eph-rc #place_order,.rp-elegir-azul,.tpm-azul){
  background:#7FFF24;color:#0B1A00!important;border-radius:0;clip-path:polygon(var(--hm-corte) 0,100% 0,100% calc(100% - var(--hm-corte)),calc(100% - var(--hm-corte)) 100%,0 100%,0 var(--hm-corte));
  font-family:'Barlow Condensed','DM Sans',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.01em;box-shadow:none}
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-btn-azul,.eph-mu-boton-azul,.rl-btn-azul,.vp-boton,.eph-rf-boton,.eph-rf-compra button.single_add_to_cart_button,.eph-rc #place_order,.rp-elegir-azul,.tpm-azul):hover{background:#9DFF57;color:#0B1A00!important}
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-btn-azul,.eph-mu-boton-azul,.rl-btn-azul,.vp-boton,.eph-rf-boton) svg{color:#0B1A00}
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-btn,.rh-btn-verde,.rh-btn-borde,.rh-btn-blanco){font-family:'Barlow Condensed','DM Sans',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.01em}
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-btn-verde){background:#1FAF54;color:#FFFFFF}
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-btn-verde):hover{background:#178F44}

/* ── Héroe: título gigante en cursiva ── */
/* El héroe conserva el alto de la foto (3 a 1): más alto, la foto quedaba como un recuadro cortado (Martín 31/10). El título se achica para entrar */
html:root:not(#hm) body.hm-skin.hm-skin .rh-heroe-foto h1{font-family:'Barlow Condensed','DM Sans',sans-serif!important;font-weight:900!important;font-style:italic!important;text-transform:uppercase!important;font-size:clamp(3.25rem,1.6rem + 3.4vw,4.75rem)!important;line-height:.88!important;letter-spacing:-.01em!important;color:#FFFFFF}
@media (min-width:760px){
  html:root:not(#hm) body.hm-skin.hm-skin .rh-heroe-foto .rh-heroe-copy{max-width:min(800px,62%)!important}
}
/* Con la cinta en el medio, "¿Cómo te ayudamos?" ya no se monta sobre el héroe */
html:root:not(#hm) body.hm-skin.hm-skin .hm-cinta + .rh-wrap > .rh-ayudamos{margin-top:40px!important}
html:root:not(#hm) body.hm-skin.hm-skin .rh-heroe-foto .rh-heroe-copy{max-width:min(760px,56%)}
html:root:not(#hm) body.hm-skin.hm-skin .rh-heroe-foto .rh-heroe-copy p{color:#D3DCEA}
html:root:not(#hm) body.hm-skin.hm-skin .rh-heroe-foto :is(svg,.rh-heroe-datos svg){color:#7FFF24}
@media (max-width:759px){
  html:root:not(#hm) body.hm-skin.hm-skin .rh-heroe-foto .rh-heroe-copy{max-width:none}
}

/* ── La cinta lima debajo del héroe ── */
.hm-cinta{position:relative;z-index:3;height:58px;margin:-30px 0 8px;display:flex;align-items:center;overflow:hidden;background:#7FFF24;color:#0B1A00;transform:rotate(-1.4deg) scale(1.02)}
.hm-cinta-pista{display:flex;flex:none;animation:hm-correr 40s linear infinite}
.hm-cinta-pista span{display:inline-flex;align-items:center;padding:0 22px;font:italic 800 22px 'Barlow Condensed','DM Sans',sans-serif;text-transform:uppercase;white-space:nowrap;color:#0B1A00}
.hm-cinta-pista span::after{content:"";width:9px;height:9px;margin-left:44px;background:#0B1A00;transform:rotate(45deg)}
@keyframes hm-correr{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hm-cinta-pista{animation:none}}
@media (max-width:759px){.hm-cinta{height:48px;margin-top:-22px;transform:rotate(-2deg) scale(1.05)}.hm-cinta-pista span{font-size:18px;padding:0 16px}.hm-cinta-pista span::after{margin-left:32px;width:7px;height:7px}}

/* ── Chips de "Ayudame a elegir": elegido en lima ── */
html:root:not(#hm) body.hm-skin.hm-skin .rh-chip input:checked + span{background:#7FFF24;color:#0B1A00;box-shadow:none}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin .rh-chip input:checked + span{background:#7FFF24;color:#0B1A00}
html:root:not(#hm) body.hm-skin.hm-skin .rh-modo input:checked + span{background:#0B0F1A!important;color:#FFFFFF!important}
html:root:not(#hm)[data-theme="dark"] body.hm-skin.hm-skin .rh-modo input:checked + span{background:#7FFF24!important;color:#0B1A00!important}

/* ── Tarjetas de PC: esquinas cortadas, foto en blanco ── */
html:root:not(#hm) body.hm-skin.hm-skin .rl-pc{border-radius:0;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
html:root:not(#hm) body.hm-skin.hm-skin .rl-pc-cuota{color:var(--mu-texto)}
html:root:not(#hm) body.hm-skin.hm-skin .rl-pc-cuota :is(b,strong){color:var(--hm-acento)}

/* ── "Armala a tu medida": el bloque lima ── */
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida{background:#7FFF24;color:#0B1A00;border:0;border-radius:0;clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);box-shadow:none}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida :is(h2,h3,p,li,span,b,.rh-kicker,.rh-baja){color:#0B1A00}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida h2{font-size:clamp(2.75rem,1.6rem + 3.6vw,4.75rem)}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida :is(ol,ul) > li{background:rgba(11,26,0,.06);border:2px solid #0B1A00;border-radius:0;box-shadow:none}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida svg{color:inherit}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida .rh-btn-verde{background:#0B0F1A;color:#FFFFFF}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida .rh-btn-verde svg{color:#25D366}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida :is(.rh-btn-borde,.rh-btn-blanco,a.rh-link){background:transparent;color:#0B1A00;border:2px solid #0B1A00}

/* Los números de los pasos (son ::before con el azul escrito a mano) */
html:root:not(#hm) body.hm-skin.hm-skin :is(.rh-pasos,.rh-compra ol) > li::before{background:#7FFF24!important;color:#0B1A00!important}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida .rh-pasos{background:transparent!important;box-shadow:none!important;border:0!important}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida .rh-pasos > li::before{background:#0B1A00!important;color:#7FFF24!important}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida .rh-pasos > li::after{background:#0B1A00!important}
html:root:not(#hm) body.hm-skin.hm-skin .rh .rh-medida .rh-al-armador{color:#0B1A00!important;font-weight:700}

/* ── Las cajas de la portada: esquinas cortadas en vez de redondeadas ── */
html:root:not(#hm) body.hm-skin.hm-skin .rh :is(.rh-ayudamos-grilla > *,.rh-porque-grilla,.eph-mu-incluye,.eph-mu-local-texto){border-radius:0;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}

/* ── Pie: siempre oscuro, con el lima ── */
html:root:not(#hm) body.hm-skin.hm-skin :is(.eph-mu-pie-oscuro,.site-footer){background:#070A12}
html:root:not(#hm) body.hm-skin.hm-skin :is(.eph-mu-pie-oscuro,.site-footer) a:hover{color:#7FFF24}

/* Banner propio arriba de la portada, a todo el ancho (Cyber Monday, Martín 31/10) */
html:root:not(#hm) body.hm-skin.hm-skin .rh-banner-franja a,html:root:not(#hm) body.hm-skin.hm-skin .rh-banner-franja picture{display:block}
html:root:not(#hm) body.hm-skin.hm-skin .rh-banner-franja img{display:block;width:100%;height:auto;max-width:none;border-radius:0}
html:root:not(#hm) body.hm-skin.hm-skin .rh-banner-franja .rh-solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:root:not(#hm) body.hm-skin.hm-skin .rh-banner-franja + .hm-cinta{margin-top:0}