/*
 * Ofertas TV — estilos de las diapositivas (TV y vista previa del panel).
 * Todo está diseñado sobre 1920x1080 y después se escala al tamaño real de la pantalla.
 * Sin CSS Grid ni "gap" para que funcione en WebView viejos.
 */

@font-face {
  font-family: 'OTV Precio';
  src: url('fonts/BigShoulders-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'OTV Texto';
  src: url('fonts/BricolageGrotesque-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'OTV Texto';
  src: url('fonts/BricolageGrotesque-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* ------------------------------------------------------------ estilos de color */

[data-theme="oferta"] {
  --paper: #FFFFFF; --field: #FFFFFF; --strip: #F0F0F0;
  --ink: #000000; --muted: #5A5A5A;
  --band: #D8151B; --band-ink: #FFFFFF;
  --tag: #FFD200; --tag-ink: #000000;
  --sticker: #D8151B; --sticker-ink: #FFFFFF;
  --slash: #D8151B;
  --ticker: #FFD200; --ticker-ink: #000000;
}
[data-theme="fresco"] {
  --paper: #F3F8EC; --field: #FFFFFF; --strip: #E3EED8;
  --ink: #000000; --muted: #4E5D48;
  --band: #14803D; --band-ink: #FFFFFF;
  --tag: #FFD200; --tag-ink: #000000;
  --sticker: #F26B1D; --sticker-ink: #FFFFFF;
  --slash: #F26B1D;
  --ticker: #14803D; --ticker-ink: #FFFFFF;
}
[data-theme="celeste"] {
  --paper: #FFFFFF; --field: #FFFFFF; --strip: #E6F0FA;
  --ink: #000000; --muted: #4D5A6A;
  --band: #0C5DB8; --band-ink: #FFFFFF;
  --tag: #FFD200; --tag-ink: #000000;
  --sticker: #0C5DB8; --sticker-ink: #FFFFFF;
  --slash: #D8151B;
  --ticker: #0C5DB8; --ticker-ink: #FFFFFF;
}
[data-theme="noche"] {
  --paper: #13284A; --field: #1C3763; --strip: #0D1D37;
  --ink: #FFFFFF; --muted: #B6C3DA;
  --band: #E9B949; --band-ink: #13284A;
  --tag: #E9B949; --tag-ink: #13284A;
  --sticker: #FFFFFF; --sticker-ink: #13284A;
  --slash: #E9B949;
  --ticker: #E9B949; --ticker-ink: #13284A;
}

/* ------------------------------------------------------------ marco */

.frame {
  position: relative;
  width: 1920px;
  height: 1080px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: 'OTV Texto', 'Roboto', 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.frame.vertical { width: 1080px; height: 1920px; }
.frame *, .frame *::before, .frame *::after { box-sizing: border-box; }

.f-head {
  -webkit-flex: 0 0 104px; flex: 0 0 104px;
  height: 104px;
  background: var(--band);
  color: var(--band-ink);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: 0 56px;
  position: relative;
  z-index: 2;
}
.f-brand { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-width: 0; }
.f-logo { height: 72px; max-width: 300px; object-fit: contain; margin-right: 26px; }
.f-name { font-weight: 700; font-size: 52px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-clock { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; white-space: nowrap; }
.f-day { font-size: 34px; margin-right: 18px; opacity: 0.85; }
.f-time { font-family: 'OTV Precio', 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 74px; line-height: 1; }

.f-slot {
  position: relative;
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.f-ticker {
  -webkit-flex: 0 0 76px; flex: 0 0 76px;
  height: 76px;
  background: var(--ticker);
  color: var(--ticker-ink);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.f-ticker-in { position: absolute; left: 0; top: 0; height: 76px; white-space: nowrap; }
.f-ticker-txt {
  display: inline-block;
  will-change: transform;
  font-weight: 700;
  font-size: 42px;
  line-height: 76px;
  white-space: pre;
  -webkit-animation: otv-ticker 40s linear infinite;
  animation: otv-ticker 40s linear infinite;
}
@-webkit-keyframes otv-ticker { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@keyframes otv-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ piezas comunes */

.sl {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: 'OTV Texto', 'Roboto', 'Segoe UI', Arial, sans-serif;
}

.img-box, .p-img, .m-img, .g-img, .a-img { position: relative; overflow: hidden; background: var(--field); }
.p-img img, .m-img img, .g-img img, .a-img img {
  position: absolute;
  top: 7%; left: 7%; width: 86%; height: 86%;
  object-fit: contain;
}
.img-empty {
  position: absolute; top: 12%; left: 12%; right: 12%; bottom: 12%;
  border: 6px dashed rgba(127, 127, 127, 0.35);
  border-radius: 32px;
  color: rgba(127, 127, 127, 0.8);
  font-size: 40px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  text-align: center;
}

/* en las columnas flexibles nada se achica: si no entra, se reduce la letra (ver fit en slides.js) */
.p-info > *, .m-info > *, .m-block > *, .g-body > *, .a-text > * { -webkit-flex-shrink: 0; flex-shrink: 0; }

.p-brand { font-size: 2.2em; line-height: 1.1; color: var(--muted); margin-bottom: 0.15em; }
.p-name { font-size: 4.8em; font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; overflow: hidden; }
.p-detail { font-size: 2.5em; line-height: 1.15; margin-top: 0.25em; }
.p-price { margin-top: 1.1em; }

.chip {
  display: inline-block;
  background: var(--band);
  color: var(--band-ink);
  font-weight: 700;
  font-size: 2em;
  line-height: 1;
  padding: 0.28em 0.75em 0.3em;
  border-radius: 999px;
  margin-bottom: 0.7em;
}

/* precio anterior, tachado con una raya como hecha a mano */
.prev { font-size: 2.8em; line-height: 1.1; margin-bottom: 0.25em; white-space: nowrap; }
.prev-label { margin-right: 0.3em; color: var(--muted); }
.prev-val { position: relative; display: inline-block; font-weight: 700; }
.prev-val::after {
  content: '';
  position: absolute;
  left: -6%; right: -6%;
  top: 50%;
  height: 0.075em;
  margin-top: -0.02em;
  background: var(--slash);
  border-radius: 0.04em;
  -webkit-transform: rotate(-4deg); transform: rotate(-4deg);
}

/* la etiqueta de precio: el elemento protagonista */
.tag-wrap {
  display: -webkit-inline-flex; display: inline-flex;
  vertical-align: top;
  font-size: 13em;
  -webkit-transform: rotate(-2deg); transform: rotate(-2deg);
  -webkit-transform-origin: 30% 50%; transform-origin: 30% 50%;
  -webkit-filter: drop-shadow(0 0.035em 0 rgba(0, 0, 0, 0.22));
  filter: drop-shadow(0 0.035em 0 rgba(0, 0, 0, 0.22));
}
.tag {
  position: relative;
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  background: var(--tag);
  color: var(--tag-ink);
  font-family: 'OTV Precio', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  line-height: 0.84;
  white-space: nowrap;
  padding: 0.07em 0.2em 0.05em 0.5em;
  -webkit-clip-path: polygon(0.3em 0, 100% 0, 100% 100%, 0.3em 100%, 0 50%);
  clip-path: polygon(0.3em 0, 100% 0, 100% 100%, 0.3em 100%, 0 50%);
}
.tag-hole {
  position: absolute;
  left: 0.15em;
  top: 50%;
  width: 0.1em; height: 0.1em;
  margin-top: -0.05em;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0.012em 0 rgba(0, 0, 0, 0.3);
}
.tag-cur { font-size: 0.36em; margin: 0.22em 0.08em 0 0; }
.tag-int { font-size: 1em; letter-spacing: -0.005em; }
.tag-side {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-self: stretch; align-self: stretch;
  -webkit-justify-content: space-between; justify-content: space-between;
  margin-left: 0.03em;
}
.tag-dec { font-size: 0.42em; margin-top: 0.12em; }
.tag-per {
  font-family: 'OTV Texto', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 0.15em;
  line-height: 1;
  margin-bottom: 0.45em;
}

.unit { font-size: 2em; line-height: 1.2; color: var(--muted); margin-top: 0.85em; }

.sticker {
  position: absolute;
  top: 6%; right: 6%;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--sticker);
  color: var(--sticker-ink);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-transform: rotate(10deg); transform: rotate(10deg);
  z-index: 2;
}
.sticker-txt {
  display: block;
  max-width: 84%;
  font-family: 'OTV Precio', 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 124px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.sticker-sm { width: 156px; height: 156px; top: 18px; right: 18px; }
.sticker-sm .sticker-txt { font-size: 76px; }

.legal {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 76px;
  padding: 0 56px;
  background: var(--strip);
  color: var(--muted);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.legal-txt { display: block; width: 100%; font-size: 27px; line-height: 1.15; overflow: hidden; }

/* ------------------------------------------------------------ producto en oferta */

.sl-producto .p-img { position: absolute; left: 0; top: 0; bottom: 76px; width: 46%; }
.sl-producto .p-info {
  position: absolute;
  left: 46%; right: 0; top: 0; bottom: 76px;
  padding: 48px 72px 40px 48px;
  font-size: 20px;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
  overflow: hidden;
}
.sl-producto.no-legal .p-img, .sl-producto.no-legal .p-info { bottom: 0; }

/* ------------------------------------------------------------ promo por cantidad */

.sl-promo .m-block {
  position: absolute;
  left: 0; top: 0; bottom: 76px; width: 34%;
  background: var(--band);
  color: var(--band-ink);
  padding: 56px 60px;
  font-size: 20px;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
  overflow: hidden;
}
.m-pre { font-size: 3.2em; font-weight: 700; line-height: 1.05; }
.m-big {
  font-family: 'OTV Precio', 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 21em;
  line-height: 0.92;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
}
.m-sub { font-size: 3.2em; font-weight: 700; line-height: 1.1; margin-top: 0.15em; }
.sl-promo .m-img { position: absolute; left: 34%; top: 0; bottom: 76px; width: 23%; }
.sl-promo .m-info {
  position: absolute;
  left: 57%; right: 0; top: 0; bottom: 76px;
  padding: 48px 64px 40px 32px;
  font-size: 17px;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
  overflow: hidden;
}
.m-each { font-size: 2.4em; font-weight: 700; line-height: 1.15; margin-bottom: 0.35em; }
.sl-promo.no-legal .m-block, .sl-promo.no-legal .m-img, .sl-promo.no-legal .m-info { bottom: 0; }

/* ------------------------------------------------------------ varios productos */

.sl-grilla { background: var(--strip); }
.g-head {
  position: absolute; left: 0; right: 0; top: 0; height: 150px;
  padding: 0 64px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.g-title { font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 36px; }
.g-head .chip { font-size: 40px; margin: 0; }
.g-row {
  position: absolute; left: 44px; right: 44px; top: 150px; bottom: 112px;
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
}
.sl-grilla.no-legal .g-row { bottom: 40px; }
.g-card {
  position: relative;
  -webkit-flex: 1 1 0; flex: 1 1 0;
  max-width: 900px;
  margin: 0 20px;
  background: var(--field);
  border-radius: 28px;
  overflow: hidden;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.g-img { -webkit-flex: 0 0 54%; flex: 0 0 54%; }
.g-img img { top: 4%; left: 4%; width: 92%; height: 92%; }
.g-body {
  position: relative;
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-height: 0;
  padding: 10px 34px 30px;
  font-size: 16px;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
}
.g-n1 .g-body { font-size: 24px; }
.g-n2 .g-body { font-size: 21px; }
.g-n3 .g-body { font-size: 18px; }
.g-name { font-size: 3em; font-weight: 700; line-height: 1.04; overflow: hidden; }
.g-detail { font-size: 2em; line-height: 1.15; margin-top: 0.2em; color: var(--muted); }
.g-body .p-price { margin-top: auto; padding-top: 0.6em; }
.g-body .prev { font-size: 2.2em; }
.g-body .tag-wrap { font-size: 8.5em; }
.g-body .unit { font-size: 1.6em; margin-top: 0.6em; }
.g-empty { font-size: 48px; color: var(--muted); -webkit-align-self: center; align-self: center; }

/* ------------------------------------------------------------ aviso */

.sl-aviso { background: var(--band); color: var(--band-ink); }
.sl-aviso .a-text {
  position: absolute; left: 0; right: 0; top: 0; bottom: 76px;
  padding: 80px 120px;
  font-size: 20px;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
  overflow: hidden;
}
.sl-aviso.has-img .a-text { right: 42%; padding-right: 72px; }
.a-title { font-size: 7.2em; font-weight: 700; line-height: 1; letter-spacing: -0.015em; overflow: hidden; }
.a-body { font-size: 3em; line-height: 1.25; margin-top: 0.6em; white-space: pre-line; }
.sl-aviso .a-img { position: absolute; right: 0; top: 0; bottom: 76px; width: 42%; }
.sl-aviso .legal { background: rgba(0, 0, 0, 0.16); color: var(--band-ink); }
.sl-aviso.no-legal .a-text, .sl-aviso.no-legal .a-img { bottom: 0; }

/* ------------------------------------------------------------ imagen o video propio */

.sl-media { background: #000; }
.sl-media img, .sl-media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-media.fit-contain img, .sl-media.fit-contain video { object-fit: contain; }

/* ------------------------------------------------------------ pantalla vertical */

.vertical .sl-producto .p-img { width: 100%; right: 0; bottom: auto; height: 44%; }
.vertical .sl-producto .p-info { left: 0; top: 44%; padding: 24px 72px 40px; -webkit-justify-content: flex-start; justify-content: flex-start; }
.vertical .sl-promo .m-block { width: 100%; bottom: auto; height: 26%; padding: 40px 72px; }
.vertical .sl-promo .m-img { left: 0; width: 100%; top: 26%; bottom: auto; height: 32%; }
.vertical .sl-promo .m-info { left: 0; top: 58%; padding: 16px 72px 40px; -webkit-justify-content: flex-start; justify-content: flex-start; }
.vertical .m-big { font-size: 15em; }
.vertical .g-row { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: stretch; align-content: stretch; }
.vertical .g-card { -webkit-flex: 1 1 40%; flex: 1 1 40%; margin: 0 14px 28px; }
.vertical .g-n1 .g-card, .vertical .g-n2 .g-card { -webkit-flex-basis: 100%; flex-basis: 100%; }
.vertical .g-title { font-size: 64px; }
.vertical .sl-aviso.has-img .a-text { right: 0; bottom: 40%; padding: 80px 80px 40px; }
.vertical .sl-aviso .a-img { width: 100%; top: auto; height: 40%; bottom: 76px; }
.vertical .sl-aviso.no-legal .a-img { bottom: 0; }

/* ------------------------------------------------------------ animación de entrada (solo en el TV) */

.play .p-img img, .play .m-img img {
  -webkit-animation: otv-zoom 14s ease-out both;
  animation: otv-zoom 14s ease-out both;
}
.play .tag-wrap {
  -webkit-animation: otv-stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s both;
  animation: otv-stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s both;
}
.play .sticker {
  -webkit-animation: otv-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.7s both;
  animation: otv-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.7s both;
}
@-webkit-keyframes otv-zoom { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.06); } }
@keyframes otv-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@-webkit-keyframes otv-stamp {
  from { opacity: 0; -webkit-transform: scale(1.3) rotate(-7deg); }
  to { opacity: 1; -webkit-transform: scale(1) rotate(-2deg); }
}
@keyframes otv-stamp {
  from { opacity: 0; transform: scale(1.3) rotate(-7deg); }
  to { opacity: 1; transform: scale(1) rotate(-2deg); }
}
@-webkit-keyframes otv-pop {
  from { opacity: 0; -webkit-transform: scale(0.4) rotate(-20deg); }
  to { opacity: 1; -webkit-transform: scale(1) rotate(10deg); }
}
@keyframes otv-pop {
  from { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .play .p-img img, .play .m-img img, .play .tag-wrap, .play .sticker { -webkit-animation: none; animation: none; }
}