/* La piel de Compumax: negro y rojo, con la diagonal del logo. Las secciones son las del recorrido; cambia el aspecto */

html:root:not(#cx) body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra{
  --cx-rojo:#DD0000;--cx-rojo2:#FF1F1F;--cx-acento:#B80000;--cx-noche:#0A0A0C;--cx-diag:12px;
  --rh-azul:#DD0000;--rh-azul-texto:#B80000;--rh-azul-hover:#A80000;--mu-azul:#DD0000;--mu-azul-texto:#B80000;--mu-azul-fondo:#FFF1F1;--mu-azul-pastilla:#FFE3E3;
  --mu-info:#FFF1F1;--mu-halo:#FFD6D6;--mu-linea:rgba(184,0,0,.35);--mu-tinta:#0E0E12;
  --font-primary:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra{
  --cx-acento:#FF5E5E;--rh-azul-texto:#FF5E5E;
  --mu-blanco:#141418;--mu-dato:#1C1C22;--mu-segmento:#1C1C22;--mu-gris:#1C1C22;--mu-boton-gris:#1C1C22;
  --mu-azul:#DD0000;--mu-azul-texto:#FF5E5E;--mu-azul-fondo:#2A1114;--mu-azul-pastilla:#3A1418;
  --mu-info:#2A1114;--mu-halo:#4A1A1E;--mu-linea:rgba(255,94,94,.4);
  --mu-tinta:#F3F3F5;--mu-texto:#B4B4BE;--mu-suave:#9A9AA6;--mu-campo:#3A3A44;
  --mu-borde:#2A2A32;--mu-borde-suave:#222229;
  background:#0A0A0C;
}
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin :is(.rh,.rl,.rp,.rc,.ra,.eph-rf,.eph-rc,.site-main){background:#0A0A0C}

/* Letras */
html:root:not(#cx) body.cx-skin.cx-skin,
html:root:not(#cx) body.cx-skin.cx-skin :is(p,a,span,li,button,input,select,textarea,label,small,strong,b,div,td,th,summary,dd,dt){font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html:root:not(#cx) body.cx-skin.cx-skin :is(h1,h2,h3,h4){font-family:'Saira','Figtree',sans-serif;letter-spacing:-.01em}
html:root:not(#cx) body.cx-skin.cx-skin :is(h2,h3,h4){font-weight:800}
html:root:not(#cx) body.cx-skin.cx-skin main h1{font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.98}
html:root:not(#cx) body.cx-skin.cx-skin .rh :is(.rh-sec-cabeza,.eph-mu-sec-cabeza,.rh-medida-cabeza,.eph-mu-local-cabeza) h2,
html:root:not(#cx) body.cx-skin.cx-skin .rh :is(.rh-ayudamos,.rh-porque,.rh-compra,.rh-componentes,.rh-usos) > h2{font-weight:900;text-transform:uppercase;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.6rem);line-height:1}
/* La diagonal del logo adelante de cada título */
html:root:not(#cx) body.cx-skin.cx-skin .rh :is(.rh-sec-cabeza,.eph-mu-sec-cabeza) h2::before,
html:root:not(#cx) body.cx-skin.cx-skin .rh :is(.rh-ayudamos,.rh-porque,.rh-compra,.rh-componentes,.rh-usos) > h2::before{content:"";display:inline-block;width:.42em;height:.8em;margin-right:.32em;background:var(--cx-rojo);transform:skewX(-18deg)}
html:root:not(#cx) body.cx-skin.cx-skin :is(.rl-pc-precio,.eph-mu-precio,.rp-pc-precio,.eph-rf-precio,.vs-precio){font-family:'Saira','Figtree',sans-serif;font-weight:800}

/* Encabezado: negro en los dos modos */
html:root:not(#cx) body.cx-skin.cx-skin .site-header{background:#0A0A0C;border-bottom:1px solid #222229}
html:root:not(#cx) body.cx-skin.cx-skin .site-header .nav-pill{font-family:'Saira','Figtree',sans-serif;font-weight:600;color:#E8E8EC}
html:root:not(#cx) body.cx-skin.cx-skin .site-header .nav-pill:hover{color:#FF5E5E}
html:root:not(#cx) body.cx-skin.cx-skin .site-header .nav-pill.rm-encontra-pill{background:#DD0000!important;color:#FFF!important;border-radius:0;clip-path:polygon(var(--cx-diag) 0,100% 0,calc(100% - var(--cx-diag)) 100%,0 100%);padding-left:20px;padding-right:20px}
html:root:not(#cx) body.cx-skin.cx-skin .site-header .nav-pill.rm-encontra-pill svg{color:#FFF!important}
html:root:not(#cx) body.cx-skin.cx-skin .site-header :is(svg,button,a){color:#E8E8EC}
html:root:not(#cx) body.cx-skin.cx-skin .site-header .site-branding img{filter:none!important;content:normal!important}
html:root:not(#cx) body.cx-skin.cx-skin :is(.eph-rc-logo,.site-branding,.eph-mu-pie-marca,.eph-co-logo) img{filter:none!important}
html:root:not(#cx) body.cx-skin.cx-skin .rt-tira.rt-tira{background:#DD0000!important;color:#FFF!important}
html:root:not(#cx) body.cx-skin.cx-skin .rt-tira.rt-tira *{color:#FFF!important}

/* Botones de comprar: rojos, con la diagonal */
html:root:not(#cx) body.cx-skin.cx-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,#place_order){
  background:#DD0000!important;color:#FFF!important;border-radius:0;clip-path:polygon(var(--cx-diag) 0,100% 0,calc(100% - var(--cx-diag)) 100%,0 100%);font-family:'Saira','Figtree',sans-serif;font-weight:800;letter-spacing:.01em;box-shadow:none;transition:background .15s}
html:root:not(#cx) body.cx-skin.cx-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,.rp-elegir-azul,.tpm-azul,#place_order):hover{background:#FF1F1F!important}
html:root:not(#cx) body.cx-skin.cx-skin :is(.rh-btn,.rh-btn-verde,.rh-btn-borde,.rh-btn-blanco){font-family:'Saira','Figtree',sans-serif;font-weight:700}
html:root:not(#cx) body.cx-skin.cx-skin .rh-btn-verde{background:#0B7038;color:#FFF}

/* Héroe: foto entera con el título grande */
html:root:not(#cx) body.cx-skin.cx-skin .rh-heroe-foto h1,
html:root:not(#cx) body.cx-skin.cx-skin .rh-heroe h1{font-family:'Saira','Figtree',sans-serif!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:-.02em;line-height:.95!important;font-size:clamp(2.4rem,1.2rem + 4.2vw,4.6rem)!important;color:#FFF!important}
html:root:not(#cx) body.cx-skin.cx-skin .rh-heroe .rh-heroe-copy p{color:#E4E4EA}
html:root:not(#cx) body.cx-skin.cx-skin .rh-heroe :is(.rh-heroe-datos svg,.eph-mu-heroe-datos svg){color:#FF5E5E}
/* Con el banner de la temporada, la imagen ya dice todo: el texto queda para Google y los lectores de pantalla */
html:root:not(#cx) body.cx-skin.cx-skin .rh-heroe[data-ept-banner] .rh-heroe-copy{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Chips */
html:root:not(#cx) body.cx-skin.cx-skin .rh-chip input:checked + span{background:#DD0000;color:#FFF;box-shadow:none}
html:root:not(#cx) body.cx-skin.cx-skin .rh-modo input:checked + span{background:#0E0E12!important;color:#FFF!important}
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin .rh-modo input:checked + span{background:#DD0000!important;color:#FFF!important}

/* Tarjetas: rectas, sin sombra, y el rojo aparece al pasar */
html:root:not(#cx) body.cx-skin.cx-skin .rl-pc{border-radius:4px;box-shadow:none;transition:border-color .15s,transform .15s}
html:root:not(#cx) body.cx-skin.cx-skin .rl-pc:hover{border-color:#DD0000;transform:translateY(-2px)}
html:root:not(#cx) body.cx-skin.cx-skin .rl-pc-cuota :is(b,strong){color:var(--cx-acento)}
html:root:not(#cx) body.cx-skin.cx-skin .rh :is(.rh-ayudamos-grilla > *,.rh-porque-grilla,.eph-mu-incluye,.eph-mu-local-texto,.rh-ayudamos,.rh-uso,.rh-usos a,.rh-componentes a){border-radius:4px;box-shadow:none}

/* "Armala a tu medida": el bloque rojo */
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida{background:#DD0000;color:#FFF;border:0;border-radius:0;box-shadow:none;clip-path:polygon(28px 0,100% 0,calc(100% - 28px) 100%,0 100%);padding-left:56px;padding-right:56px}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida :is(h2,h3,p,li,span,b,.rh-kicker,.rh-baja){color:#FFF}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida h2{font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);font-weight:900;text-transform:uppercase}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida .rh-pasos{background:rgba(0,0,0,.18)!important;box-shadow:none!important;border:0!important;border-radius:0}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida .rh-pasos > li::before{background:#FFF!important;color:#B80000!important}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida .rh-pasos > li::after{background:rgba(255,255,255,.5)!important}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida .rh-btn-verde{background:#0A0A0C;color:#FFF}
html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida .rh-al-armador{color:#FFF!important;font-weight:700}
html:root:not(#cx) body.cx-skin.cx-skin :is(.rh-pasos,.rh-compra ol) > li::before{background:#DD0000!important;color:#FFF!important}
@media (max-width:759px){html:root:not(#cx) body.cx-skin.cx-skin .rh .rh-medida{clip-path:none;padding-left:20px;padding-right:20px}}

/* Pie negro */
html:root:not(#cx) body.cx-skin.cx-skin :is(.eph-mu-pie-oscuro,.site-footer){background:#050506}
html:root:not(#cx) body.cx-skin.cx-skin :is(.eph-mu-pie-oscuro,.site-footer) a:hover{color:#FF5E5E}

/* Lo que en oscuro quedaba con el azul noche o el rojo sobre negro */
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra .rh-ayudamos{background:#141418}
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin :is(.eph-sm-boton,.eph-rf-sumar button,.eph-sumale button,.vs-sumar){color:#FF5E5E!important;border-color:#FF5E5E!important}

/* La franja de arriba es fija: en las páginas de compra, con el encabezado mínimo, tapaba el logo */
html:root:not(#cx) body.cx-skin.cx-skin:is(.woocommerce-cart,.woocommerce-checkout,.eph-informar-recorrido){padding-top:36px}
/* Campos de texto en oscuro */
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin main textarea{background:#1C1C22;color:#F3F3F5;border-color:#3A3A44}
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin main textarea::placeholder{color:#9A9AA6}

/* El encabezado es negro también en modo claro: las letras y los íconos son claros */
html:root:not(#cx) body.cx-skin.cx-skin .site-header{background:#0A0A0C!important}
html:root:not(#cx) body.cx-skin.cx-skin .site-header :is(.header-top,.header-main,.header-nav){background:transparent!important}

/* El banner de la temporada, entero y centrado. 2.909 es la proporción de la imagen (1024 x 352) */
@media (min-width:900px){
  html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner~="grande"]{min-height:calc(min(100vw,1500px) / 2.909);padding:0;background:#0A0A0C var(--ept-banner) center top/min(100vw,1500px) auto no-repeat}
  html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner~="grande"] .rh-heroe-texto{padding:0;min-height:0}
}
html:root:not(#cx) body.cx-skin.cx-skin .rh-heroe[data-ept-banner] + .rh-wrap > .rh-ayudamos{margin-top:28px}
html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner]{background-color:#0A0A0C}

/* La franja: todo en blanco, también el texto de la temporada */
html:root:not(#cx) body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra .rt-tira.rt-tira.rt-tira,
html:root:not(#cx) body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra .rt-tira.rt-tira.rt-tira *{color:#FFF!important}

/* En el celular: la imagen trae arriba el lugar para el texto, que acá va escondido. Se recorta ese vacío */
@media (max-width:899px){
  html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner]{min-height:0;padding:0;background:#0A0A0C}
  html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner] .rh-heroe-texto{padding:0;min-height:0;margin:0}
  html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner] .ept-banner-chico{margin:0;height:auto;aspect-ratio:1.55;object-fit:cover;object-position:center bottom}
  html:root:not(#cx) body.cx-skin.cx-skin.eph-temporada .rh-heroe[data-ept-banner] .ept-banner-pie{display:none}
}

/* El local: una sola foto de la vidriera, apaisada y entera */
html:root:not(#cx) body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra .eph-mu-local-fotos{grid-template-columns:minmax(0,1fr)}
html:root:not(#cx) body.cx-skin.cx-skin.eph-muestra.eph-muestra.eph-muestra.eph-muestra.eph-muestra .eph-mu-local-fotos img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px}

/* El email ya viene obligatorio: sin esto sumaba un segundo asterisco */
html:root:not(#cx) body.cx-skin.cx-skin label .required ~ .eph-co-req{display:none}

/* La opción elegida del checkout se ve en rojo, también en oscuro */
html:root:not(#cx) body.cx-skin.cx-skin .eph-rc-op input:checked,
html:root:not(#cx) body.cx-skin.cx-skin .eph-rc #payment .wc_payment_method > input:checked{border-color:#DD0000!important;background:#FFF!important}
/* "Cómo llegar" sin el azul noche */
html:root:not(#cx)[data-theme="dark"] body.cx-skin.cx-skin .eph-mu-local a[href*="google.com/maps"]{background:transparent!important;border:1px solid #3A3A44!important;color:#F3F3F5!important}