/* ElectroPC · La portada de temporada con la escena de producto (Cyber Monday, 30/10).
 *
 * Es la maqueta aprobada por Martín (`maquetas/cybermonday-rediseno/producto3d-real.html`):
 * - computadora (desde 861px): el lienzo 3D ocupa toda la portada, detrás del texto, con
 *   un velo del color de la pared detrás del texto. La habitación (pared y piso) es el
 *   fondo de la portada, así que antes de que llegue el 3D ya se ve; la línea del piso la
 *   pasa la escena en `--piso`. La imagen fija queda para cuando no hay 3D;
 * - celular: el texto y abajo la escena, con la imagen fija hasta que aparece el 3D.
 *
 * Tema claro y oscuro: sigue el interruptor del tema (`data-theme` en <html>) y, sin él,
 * el del sistema. El claro es una habitación clara con neón.
 *
 * Carga solo con la escena puesta (`EPH_Temporada::encolar`). Los selectores repiten
 * `.eph-temporada` para ganarle a la portada de la terminación nueva (`muestra.css`). */

body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"]{
  --ep-fondo:#E9E5F1;
  --ep-pared:linear-gradient(#E1DDF7 0,#E7E3F2 calc(var(--piso,74%) - 40px),#D8D4EB calc(var(--piso,74%) - 1px),#C4BACD var(--piso,74%));
  --ep-velo:radial-gradient(ellipse 62% 60% at 48% 50%,rgba(233,229,241,.95) 0,rgba(233,229,241,.9) 45%,rgba(233,229,241,0) 78%);
  --ep-ceja-fondo:rgba(192,38,211,.08);--ep-ceja-borde:rgba(192,38,211,.32);--ep-ceja:#A21CAF;
  --ep-titulo:#0F172A;--ep-resalte:linear-gradient(90deg,#DB2777,#7C3AED 55%,#0891B2);
  --ep-bajada:#475569;--ep-bajada-b:#0F172A;--ep-dato:#334155;--ep-dato-ic:#0891B2;
  --ep-poster-claro:block;--ep-poster-oscuro:none;
  position:relative;overflow:hidden;background:var(--ep-fondo)}
html[data-theme="dark"] body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"]{
  --ep-fondo:#0E0920;
  --ep-pared:linear-gradient(#0F0728 0,#0E0822 calc(var(--piso,74%) - 14px),#0A0421 calc(var(--piso,74%) - 1px),#261621 var(--piso,74%),#21121D 100%);
  --ep-velo:radial-gradient(ellipse 62% 60% at 48% 50%,rgba(14,9,32,.94) 0,rgba(14,9,32,.9) 45%,rgba(14,9,32,0) 78%);
  --ep-ceja-fondo:rgba(255,62,200,.14);--ep-ceja-borde:rgba(255,62,200,.35);--ep-ceja:#FFB3E9;
  --ep-titulo:#FFFFFF;--ep-resalte:linear-gradient(90deg,#FF8BDE,#9EF3FF);
  --ep-bajada:#CBD5E1;--ep-bajada-b:#FFFFFF;--ep-dato:#E2E8F0;--ep-dato-ic:#22E1FF;
  --ep-poster-claro:none;--ep-poster-oscuro:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"]{
    --ep-fondo:#0E0920;
    --ep-pared:linear-gradient(#0F0728 0,#0E0822 calc(var(--piso,74%) - 14px),#0A0421 calc(var(--piso,74%) - 1px),#261621 var(--piso,74%),#21121D 100%);
    --ep-velo:radial-gradient(ellipse 62% 60% at 48% 50%,rgba(14,9,32,.94) 0,rgba(14,9,32,.9) 45%,rgba(14,9,32,0) 78%);
    --ep-ceja-fondo:rgba(255,62,200,.14);--ep-ceja-borde:rgba(255,62,200,.35);--ep-ceja:#FFB3E9;
    --ep-titulo:#FFFFFF;--ep-resalte:linear-gradient(90deg,#FF8BDE,#9EF3FF);
    --ep-bajada:#CBD5E1;--ep-bajada-b:#FFFFFF;--ep-dato:#E2E8F0;--ep-dato-ic:#22E1FF;
    --ep-poster-claro:none;--ep-poster-oscuro:block}
}

/* ── El texto ── */
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] > .rh-heroe-texto{position:relative;z-index:1}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-ceja{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;height:auto;margin:0;padding:5px 12px;border:1px solid var(--ep-ceja-borde);border-radius:999px;background:var(--ep-ceja-fondo);color:var(--ep-ceja);font-size:.875rem;font-weight:700;line-height:1.3}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-ceja svg{width:15px;height:15px;color:currentColor}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] h1{color:var(--ep-titulo)}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] h1 .ept-resalte{background-image:var(--ep-resalte);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] p{color:var(--ep-bajada)}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] p b{color:var(--ep-bajada-b);font-weight:700}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-heroe-botones{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-heroe-botones .rh-btn{flex:0 0 auto;width:auto}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .eph-mu-heroe-datos{display:flex;flex-wrap:wrap;gap:8px 22px;margin:4px 0 0;padding:0;list-style:none}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .eph-mu-heroe-datos li{color:var(--ep-dato);font-weight:600}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .eph-mu-heroe-datos svg{color:var(--ep-dato-ic)}

/* ── La escena: el 3D aparece encima de la imagen fija con un fundido, y la imagen se va
   recién cuando el 3D ya está entero ── */
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp{position:relative;display:block}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-lienzo,
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-poster,
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-poster img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-lienzo{pointer-events:auto}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-poster img{display:block;object-fit:contain;border-radius:0}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-claro{display:var(--ep-poster-claro)}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-oscuro{display:var(--ep-poster-oscuro)}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp canvas{position:relative;opacity:0;transition:opacity .7s ease}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-lista canvas{opacity:1}
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-lista .ept-3dp-poster{opacity:0;transition:opacity .2s linear .7s}
/* El crédito del modelo queda en el HTML pero no se ve: el autor lo autorizó (Martín 29/10). */
body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp .ept-3d-credito{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Celular: el texto y abajo la escena; "¿Cómo te ayudamos?" se monta sobre el final ── */
@media (max-width:860px){
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"]{min-height:0;padding-bottom:44px}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] > .rh-heroe-texto{padding-bottom:0}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-heroe-botones{flex-wrap:nowrap;gap:8px}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-heroe-botones .rh-btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 10px;font-size:.875rem}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .ept-largo{display:none}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .eph-mu-heroe-datos{gap:6px 14px;margin:2px 0 0}
  /* El ícono al lado del dato: sin flex en el celular quedaba en un renglón propio (Martín 2/11) */
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .eph-mu-heroe-datos li{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.8125rem;line-height:1.3;white-space:nowrap}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .eph-mu-heroe-datos svg{flex:none;width:15px;height:15px}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp{width:100%;aspect-ratio:390/300;margin:4px 0 0}
}

/* ── Computadora: el lienzo a lo ancho de la portada, detrás del texto; la escena se
   encuadra a la derecha del texto (la cuenta la hace el módulo) ── */
@media (min-width:861px){
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"]{min-height:clamp(560px,40vw,680px);padding-bottom:70px;background:var(--ep-pared)}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] > .rh-heroe-texto{min-height:inherit;justify-content:center;pointer-events:none}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .rh-heroe-copy{position:relative;max-width:min(540px,48%);pointer-events:auto}
  /* Un velo suave del color de la pared detrás del texto, para que se lea sobre la habitación */
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"] .rh-heroe-copy::before{content:"";position:absolute;inset:-110px -90px -120px -320px;z-index:-1;pointer-events:none;background:var(--ep-velo)}
  /* Con el segundo neón en la pared de la izquierda (lo avisa la escena), el velo no lo tapa: se apaga a la
     izquierda del texto. La caja del velo empieza 320px antes que el texto y el neón termina a 24px o más */
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"].ept-neon2 .rh-heroe-copy::before,body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .rh-heroe[data-ept-banner~="producto"].ept-arcade .rh-heroe-copy::before{-webkit-mask-image:linear-gradient(90deg,transparent 296px,#000 400px);mask-image:linear-gradient(90deg,transparent 296px,#000 400px)}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp{position:absolute;inset:0;z-index:0}
  /* Sin imagen fija mientras carga: la habitación ya está. Se ve solo si no hay 3D */
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp .ept-3dp-poster{display:none}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-sin3d .ept-3dp-claro{display:var(--ep-poster-claro)}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-sin3d .ept-3dp-oscuro{display:var(--ep-poster-oscuro)}
  body.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada.eph-temporada .ept-3dp-sin3d .ept-3dp-poster img{object-fit:cover;object-position:right center}
}