/*
 * Visor de pantallas de tienda. Maqueta de Diseño/pantalla-producto.html y
 * transiciones de Diseño/rotacion.html (D-25).
 * Para navegadores de tele antiguos: sin grid, sin variables CSS, sin gap en
 * flex y con prefijo -webkit- en transform y animation. Solo se animan
 * transform y opacity. El color del tema lo pone app.js en línea.
 */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; }
/*
 * Barlow Condensed y Barlow desde fonts/ (ver fonts/README.md), sin red. Si los
 * ficheros no están, la condensada del sistema (Roboto Condensed en Android TV).
 * block: mejor un instante sin texto que medir y pintar con la de respaldo.
 */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: block;
  src: url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'), url('fonts/barlow-condensed-latin-500-normal.woff') format('woff'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: block;
  src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'), url('fonts/barlow-condensed-latin-600-normal.woff') format('woff'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: block;
  src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'), url('fonts/barlow-condensed-latin-700-normal.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'), url('fonts/barlow-latin-400-normal.woff') format('woff'); }
body { font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif-condensed, 'Arial Narrow', 'Liberation Sans Narrow', 'Nimbus Sans Narrow', Arial, sans-serif; }
#viewport { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background: #000; }

/* Pantalla a tamaño nativo; app.js la escala y la centra en la ventana */
.screen { position: absolute; top: 0; left: 0; overflow: hidden; background: #fff; color: #fff; line-height: 1.1;
  -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.s169 { width: 1920px; height: 1080px; }
.s916 { width: 1080px; height: 1920px; }

.main { position: absolute; top: 0; left: 0; display: none; }
.s169 .main { width: 1920px; height: 980px; }
.s916 .main { width: 1080px; height: 1810px; }
.mode-product .main { display: block; }

.photo { position: absolute; top: 0; left: 0; background: #fff; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }
.s169 .photo { width: 998px; height: 980px; padding: 0; }
.s916 .photo { width: 1080px; height: 940px; padding: 0; }
.prod { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-animation: kb 14s ease-in-out infinite alternate; animation: kb 14s ease-in-out infinite alternate; }
.prod.broken { visibility: hidden; }
@-webkit-keyframes kb { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.045); } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.045); } }

/* Logo de marca: la imagen de assets/brands tal cual (cuadrada, con su blanco), pegada a la esquina */
.brandslot { position: absolute; top: 0; left: 0; z-index: 1; }
.brandslot img { display: block; height: 170px; width: auto; }
.s916 .brandslot img { height: 185px; }
.brandtxt { display: block; margin: 44px 0 0 48px; font-weight: 700; font-size: 44px; letter-spacing: .06em; color: #151A22; border: 4px solid #151A22; padding: 2px 13px 6px 16px; }
.s916 .brandtxt { margin: 48px 0 0 52px; }

.col { position: absolute; background: #2E3A59; overflow: hidden; }
.s169 .col { top: 0; left: 998px; width: 922px; height: 980px; }
.s916 .col { top: 940px; left: 0; width: 1080px; height: 870px; }
.col-inner { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: 100%; }

.info { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }
.s169 .info { padding: 52px 52px 8px; }
.s916 .info { padding: 44px 56px 8px; }
.info > * + * { margin-top: 18px; }
.cat { display: block; font-weight: 600; font-size: 32px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.cat.empty { display: none; }
.name { font-weight: 700; font-size: 108px; line-height: .98; word-wrap: break-word; overflow-wrap: break-word; }
.s916 .name { font-size: 104px; }
.ln { display: block; }
.ln.cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sin gap en flex: el hueco entre chips va arriba y a la derecha, para no dejar 12px bajo la última fila */
.chips { overflow: hidden; }
.info > .chips { margin-top: 6px; }
.chip { float: left; margin: 12px 12px 0 0; font-weight: 600; font-size: 30px; background: rgba(255, 255, 255, .14); padding: 6px 16px 4px; border-radius: 6px; }
.chip .fl { font-weight: 500; color: rgba(255, 255, 255, .7); }
.s916 .chip { font-size: 32px; }

.price { -webkit-flex: none; flex: none; background: #FFCC00; color: #111;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: flex-end; align-items: flex-end; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.s169 .price { padding: 28px 52px; }
.s916 .price { padding: 30px 56px; }
.pricemain { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-right: 40px; }
.amount { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; line-height: .8; white-space: nowrap; }
.int { font-weight: 700; font-size: 250px; letter-spacing: -.01em; }
.dec { font-weight: 700; font-size: 96px; margin-top: 14px; }
.s916 .int { font-size: 280px; }
.s916 .dec { font-size: 106px; margin-top: 16px; }
.dg { display: inline-block; white-space: pre; }
.legal { font-family: 'Barlow', Roboto, Arial, sans-serif; font-size: 28px; margin-top: 16px; line-height: 1.2; }
.s916 .legal { font-size: 30px; }
.qr { -webkit-flex: none; flex: none; width: 220px; text-align: center; }
.qrbox { width: 220px; height: 220px; background: #fff; padding: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.qrbox svg { display: block; width: 100%; height: 100%; }
.qr.noqr .qrbox { visibility: hidden; }
.pricemain.noprice { visibility: hidden; }
.ref { font-weight: 700; font-size: 40px; margin-top: 10px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* Faldón */
/* Se oculta con visibility para poder medirlo y ajustarlo antes de enseñarlo */
.strip { position: absolute; left: 0; bottom: 0; background: #0E0F11; color: #fff; visibility: hidden;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; padding: 0 48px; font-weight: 500; font-size: 38px; white-space: nowrap; overflow: hidden;
  -webkit-box-sizing: border-box; box-sizing: border-box; }
.s169 .strip { width: 1920px; height: 100px; }
.s916 .strip { width: 1080px; height: 110px; }
.mode-product .strip, .mode-brand .strip { visibility: visible; }
.strip > * { -webkit-flex: none; flex: none; }
.strip > * + * { margin-left: 26px; }
.strip b { font-weight: 600; }
.slogo { height: 62px; width: auto; border-radius: 10px; }
.sep { display: block; width: 2px; height: 40px; background: #3A3D44; }
.push { margin-left: auto !important; }
.clock { font-weight: 600; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.ico { display: inline-block; width: 36px; height: 36px; vertical-align: -5px; margin-right: 10px; }

/* Marca de la tienda: sin productos, o pasado valid_until (D-15) */
.brandview { position: absolute; top: 0; left: 0; display: none; background: #2E3A59;
  -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
.s169 .brandview { width: 1920px; height: 980px; }
.s916 .brandview { width: 1080px; height: 1810px; }
.mode-brand .brandview { display: -webkit-box; display: -webkit-flex; display: flex; }
.blogo { display: block; max-width: 640px; max-height: 420px; width: auto; height: auto; border-radius: 24px; margin-bottom: 48px; }
.bname { font-weight: 700; font-size: 140px; line-height: 1; padding: 0 80px; }

/*
 * Estados de sistema: vinculación (D-8) y arranque, con o sin red. Es el único
 * sitio del visor con el logo de Elektro3; las diapositivas nunca lo llevan.
 * Fondo del color del tema (lo pone app.js), mancha de luz que se desplaza muy
 * despacio y casillas del código en el amarillo del precio. Legible a 3 m.
 */
.sysview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background: #2E3A59; overflow: hidden; }
.mode-pair .sysview, .mode-boot .sysview { display: block; }
.sysbg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.sysglow { position: absolute; width: 800px; height: 800px; top: -160px; left: -20px; border-radius: 50%;
  background: -webkit-radial-gradient(center, circle, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, 0) 62%);
  background: radial-gradient(circle at center, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, 0) 62%);
  -webkit-transform: scale(2); transform: scale(2);
  -webkit-animation: drift 26s ease-in-out infinite alternate; animation: drift 26s ease-in-out infinite alternate; }
/* La mancha se dibuja a 800 px y se amplía: mismo aspecto con la cuarta parte de textura en una tele 4K */
@-webkit-keyframes drift { from { -webkit-transform: translate(0, 0) scale(2); } to { -webkit-transform: translate(260px, 180px) scale(2); } }
@keyframes drift { from { transform: translate(0, 0) scale(2); } to { transform: translate(260px, 180px) scale(2); } }
/* Franja oscura en diagonal: recuerda a la columna de la diapositiva de producto */
.sysband { position: absolute; background: rgba(0, 0, 0, .18); -webkit-transform: rotate(14deg); transform: rotate(14deg); }
.s169 .sysband { top: -400px; left: 1180px; width: 1400px; height: 1900px; }
.s916 .sysband { top: 1690px; left: -400px; width: 1900px; height: 1400px; -webkit-transform: rotate(-6deg); transform: rotate(-6deg); }

.syshead { position: absolute; z-index: 1; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.s169 .syshead { top: 64px; left: 96px; right: 96px; }
.s916 .syshead { top: 88px; left: 72px; right: 72px; }
.syslogo { display: block; height: 92px; width: 246px; }
.s916 .syslogo { height: 84px; width: 224px; }
.systag { font-weight: 600; font-size: 30px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
  border: 3px solid rgba(255, 255, 255, .35); padding: 10px 20px 7px; }
.s916 .systag { font-size: 26px; }

.pairpane, .bootpane { position: absolute; z-index: 1; display: none; }
.mode-pair .pairpane { display: -webkit-box; display: -webkit-flex; display: flex; }
.mode-boot .bootpane { display: -webkit-box; display: -webkit-flex; display: flex; }
.s169 .pairpane { top: 156px; bottom: 100px; left: 96px; right: 96px; -webkit-align-items: center; align-items: center; }
.s916 .pairpane { top: 200px; bottom: 110px; left: 72px; right: 72px; -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center; }
.pmain { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.s916 .pmain { -webkit-flex: none; flex: none; text-align: center; }
.peyebrow { font-weight: 600; font-size: 34px; letter-spacing: .14em; text-transform: uppercase; color: #FFCC00; }
.prule { display: inline-block; width: 56px; height: 6px; margin: 0 22px 8px 0; background: #FFCC00; vertical-align: middle; }
.ptitle { font-weight: 700; font-size: 108px; line-height: .95; margin-top: 14px; }
.s916 .ptitle { font-size: 120px; }
.plead { font-family: 'Barlow', Roboto, Arial, sans-serif; font-size: 40px; line-height: 1.3; margin-top: 22px; color: rgba(255, 255, 255, .84); }
.s916 .plead { font-size: 42px; }

/* Casillas del código: una por carácter, sin ambigüedad a distancia.
   El line-height centra la tinta de las mayúsculas de Barlow Condensed (medido), no la caja de la fuente. */
.pcode { display: -webkit-box; display: -webkit-flex; display: flex; margin-top: 52px; white-space: nowrap; }
.s916 .pcode { -webkit-justify-content: center; justify-content: center; margin-top: 60px; }
.pch { display: block; width: 128px; height: 176px; margin-right: 16px; background: #FFCC00; color: #111; border-radius: 14px;
  font-weight: 700; font-size: 148px; line-height: 162px; text-align: center; box-shadow: 0 10px 0 rgba(0, 0, 0, .22); }
.s916 .pch { width: 136px; height: 188px; font-size: 160px; line-height: 173px; }
.pch.wait { background: rgba(255, 255, 255, .14); box-shadow: none;
  -webkit-animation: wait 1.4s ease-in-out infinite; animation: wait 1.4s ease-in-out infinite; }
@-webkit-keyframes wait { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes wait { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.pgap { display: block; width: 28px; }
.pch:last-child { margin-right: 0; }

.pvalid { width: 900px; margin-top: 44px; }
.s916 .pvalid { margin: 52px auto 0; width: 924px; }
.pvalid.off { visibility: hidden; }
.pvalidtxt { font-family: 'Barlow', Roboto, Arial, sans-serif; font-size: 34px; line-height: 1.3; color: rgba(255, 255, 255, .86); }
.ptrack { height: 10px; margin-top: 18px; background: rgba(255, 255, 255, .16); border-radius: 5px; overflow: hidden; }
.pfill { height: 100%; background: #FFCC00; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }

/* Pasos */
.psteps { -webkit-flex: none; flex: none; list-style: none; margin: 0; background: rgba(0, 0, 0, .26); border-radius: 24px;
  -webkit-box-sizing: border-box; box-sizing: border-box; }
.s169 .psteps { width: 660px; margin-left: 72px; padding: 52px 52px 56px; }
.s916 .psteps { width: 100%; margin-top: 80px; padding: 48px 56px 52px; }
.pstep { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.pstep + .pstep { margin-top: 44px; }
.pnum { -webkit-flex: none; flex: none; width: 88px; height: 88px; border-radius: 50%; background: #FFCC00; color: #111;
  font-weight: 700; font-size: 56px; line-height: 85px; text-align: center; }
.ptxt { margin-left: 32px; font-weight: 600; font-size: 46px; line-height: 1.08; }
.phl { font-weight: 700; color: #FFCC00; }
.s916 .ptxt { font-size: 52px; }

/* Arranque */
.s169 .bootpane, .s916 .bootpane { top: 0; bottom: 0; left: 0; right: 0; -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
.btitle { font-weight: 700; font-size: 104px; line-height: 1; padding: 0 80px; }
.bdots { margin-top: 56px; height: 28px; }
.bsub { font-family: 'Barlow', Roboto, Arial, sans-serif; font-size: 38px; line-height: 1.3; color: rgba(255, 255, 255, .84); margin-top: 56px; padding: 0 120px; }
.s916 .bsub { padding: 0 80px; }
.bdots span { display: inline-block; width: 28px; height: 28px; margin: 0 12px; border-radius: 50%; background: #FFCC00;
  -webkit-animation: dot 1.2s ease-in-out infinite; animation: dot 1.2s ease-in-out infinite; }
.bdots span + span { -webkit-animation-delay: .2s; animation-delay: .2s; }
.bdots span + span + span { -webkit-animation-delay: .4s; animation-delay: .4s; }
@-webkit-keyframes dot { 0%, 100% { -webkit-transform: scale(.6); opacity: .35; } 45% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes dot { 0%, 100% { transform: scale(.6); opacity: .35; } 45% { transform: scale(1); opacity: 1; } }

/* Pie con el estado: mismo negro y alto que el faldón */
.sysfoot { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; background: #0E0F11; color: rgba(255, 255, 255, .86);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  font-family: 'Barlow', Roboto, Arial, sans-serif; font-size: 34px; white-space: nowrap; overflow: hidden;
  -webkit-box-sizing: border-box; box-sizing: border-box; }
.s169 .sysfoot { height: 100px; padding: 0 96px; }
.s916 .sysfoot { height: 110px; padding: 0 72px; font-size: 32px; }
.sysdot { -webkit-flex: none; flex: none; width: 20px; height: 20px; margin-right: 22px; border-radius: 50%; background: #FFCC00;
  -webkit-animation: wait 1.8s ease-in-out infinite; animation: wait 1.8s ease-in-out infinite; }
.sysfoot.warn { color: #fff; }
.sysfoot.warn .sysdot { background: #FF8A65; }

/* Cortinilla del color del tema, con canto amarillo; solo transform */
.wipe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #2E3A59; z-index: 3;
  -webkit-transform: translateX(-101%); transform: translateX(-101%); }
.wipe-edge { position: absolute; top: 0; right: 0; bottom: 0; width: 18px; background: #FFCC00; }
.s916 .wipe { -webkit-transform: translateY(-101%); transform: translateY(-101%); }
.s916 .wipe-edge { top: auto; left: 0; width: auto; height: 18px; }
.wipe.go { -webkit-animation: wipeX 900ms both; animation: wipeX 900ms both; }
.s916 .wipe.go { -webkit-animation-name: wipeY; animation-name: wipeY; }
@-webkit-keyframes wipeX {
  0% { -webkit-transform: translateX(-101%); -webkit-animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  44%, 56% { -webkit-transform: translateX(0); -webkit-animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  100% { -webkit-transform: translateX(101%); }
}
@keyframes wipeX {
  0% { transform: translateX(-101%); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  44%, 56% { transform: translateX(0); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  100% { transform: translateX(101%); }
}
@-webkit-keyframes wipeY {
  0% { -webkit-transform: translateY(-101%); -webkit-animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  44%, 56% { -webkit-transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  100% { -webkit-transform: translateY(101%); }
}
@keyframes wipeY {
  0% { transform: translateY(-101%); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  44%, 56% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
  100% { transform: translateY(101%); }
}

/* Salida hacia arriba, entrada escalonada, fundido de idioma y pulso del precio */
.out { -webkit-animation: outUp 280ms cubic-bezier(.4, 0, 1, 1) both; animation: outUp 280ms cubic-bezier(.4, 0, 1, 1) both; }
@-webkit-keyframes outUp { to { -webkit-transform: translateY(-32px); opacity: 0; } }
@keyframes outUp { to { transform: translateY(-32px); opacity: 0; } }
.in { -webkit-animation: inUp 560ms cubic-bezier(.16, 1, .3, 1) both; animation: inUp 560ms cubic-bezier(.16, 1, .3, 1) both; }
@-webkit-keyframes inUp { from { -webkit-transform: translateY(44px); opacity: 0; } to { -webkit-transform: none; opacity: 1; } }
@keyframes inUp { from { transform: translateY(44px); opacity: 0; } to { transform: none; opacity: 1; } }
.dg.in { -webkit-animation-name: digitUp; animation-name: digitUp; -webkit-animation-duration: 480ms; animation-duration: 480ms; }
@-webkit-keyframes digitUp { from { -webkit-transform: translateY(38%); opacity: 0; } to { -webkit-transform: none; opacity: 1; } }
@keyframes digitUp { from { transform: translateY(38%); opacity: 0; } to { transform: none; opacity: 1; } }
.fo { -webkit-animation: fo 200ms ease-in both; animation: fo 200ms ease-in both; }
@-webkit-keyframes fo { to { opacity: 0; } }
@keyframes fo { to { opacity: 0; } }
.fi { -webkit-animation: fi 220ms ease-out both; animation: fi 220ms ease-out both; }
@-webkit-keyframes fi { from { opacity: 0; } to { opacity: 1; } }
@keyframes fi { from { opacity: 0; } to { opacity: 1; } }
.pulse { -webkit-animation: pulse 460ms cubic-bezier(.3, 0, .3, 1) both; animation: pulse 460ms cubic-bezier(.3, 0, .3, 1) both; }
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(1.03); } 100% { -webkit-transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }