/* ===========================================================================
   Disenos de pantalla. Lienzo fijo de 1920x1080 escalado con transform:scale.
   Por que px fijos y no container queries: las Smart TV viejas (WebOS/Tizen
   2018-2020) no soportan @container ni unidades cqh. Con lienzo fijo + scale
   el resultado es identico en cualquier navegador y en la vista previa del
   panel, que usa exactamente este mismo CSS.
   =========================================================================== */

.dh-frame { position: relative; overflow: hidden; background: #000; }
.dh-layer {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity var(--dh-fade, 700ms) ease;
}
.dh-layer.is-on { opacity: 1; }

.dh-stage {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  transform-origin: top left;
  transform: translate(var(--dh-x, 0px), var(--dh-y, 0px)) scale(var(--dh-scale, 1));
  overflow: hidden;

  /* Valores por defecto; el tema real llega inline desde el servidor. */
  --board-hi: #184230; --board: #123524; --board-2: #0E2A1D;
  --chalk: #F7F4EC; --chalk-soft: #C7D6C4; --amber: #F4C54E; --tomato: #E23A2E;

  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--chalk);
  background: radial-gradient(120% 120% at 20% 0%, var(--board-hi) 0%, var(--board) 45%, var(--board-2) 100%);
  display: flex; flex-direction: column;
}
.dh-stage * { box-sizing: border-box; }
.dh-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 4px, transparent 4px 8px);
  mix-blend-mode: overlay;
}

/* ---------- barra superior (solo en los disenos de pizarra) ---------- */
.dh-stage .sbar {
  display: flex; align-items: center; gap: 18px; padding: 46px 65px;
  border-bottom: 2px solid rgba(247,244,236,.14); flex: none; position: relative; z-index: 1;
}
.dh-stage .logo {
  width: 125px; height: 125px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, #F4C54E, #E39B2E);
  display: grid; place-items: center; color: #123524; font-size: 62px; line-height: 1;
}
.dh-stage .store { font-family: "Archivo Black", Impact, sans-serif; font-size: 42px; letter-spacing: .02em; line-height: 1; }
.dh-stage .store small {
  display: block; font-family: "Figtree", sans-serif; font-weight: 600; font-size: 22px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-soft); margin-top: 8px;
}
.dh-stage .date { margin-left: auto; font-size: 24px; font-weight: 600; color: var(--chalk-soft); letter-spacing: .04em; }

.dh-stage .board { flex: 1; position: relative; z-index: 1; min-height: 0; }

.dh-stage .empty-board {
  height: 100%; display: grid; place-items: center; text-align: center; padding: 0 8%;
  font-size: 46px; font-weight: 700; color: var(--chalk-soft); line-height: 1.35;
}
.dh-stage .empty-board small { display: block; font-size: 28px; font-weight: 500; margin-top: 24px; opacity: .8; }

/* ---------- 1) lista (pizarra) ---------- */
.dh-stage .lay-list { height: 100%; display: flex; flex-direction: column; padding: 42px 65px 74px; }
.dh-stage .lay-list .items { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.dh-stage .li { display: flex; align-items: baseline; gap: 2%; }
.dh-stage .li .nm { font-family: "Archivo Black", Impact, sans-serif; font-size: 47px; line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; }
.dh-stage .li .dots { flex: 1; border-bottom: 4px dotted rgba(247,244,236,.28); transform: translateY(-3px); }
.dh-stage .li .pr { font-family: "Archivo Black", Impact, sans-serif; font-size: 47px; color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-stage .li .pr .u { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 20px; color: var(--chalk-soft); margin-left: 3px; }
.dh-stage .li.of .nm { color: #fff; }
.dh-stage .li .tag {
  font-family: "Figtree", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .06em;
  background: var(--tomato); color: #fff; padding: 3px 9px; border-radius: 7px;
  text-transform: uppercase; align-self: center;
}
.dh-stage .li .was { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 30px; color: var(--chalk-soft); text-decoration: line-through; text-decoration-color: var(--tomato); text-decoration-thickness: 3px; margin-right: 14px; }

/* Densidad de la lista: hasta 8 renglones a tamano pleno; de 9 en adelante el
   cuerpo baja para que entren todos sin recortar ni desbordar. */
.dh-stage .lay-list.n-md .li .nm,
.dh-stage .lay-list.n-md .li .pr { font-size: 42px; }
.dh-stage .lay-list.n-md .li .pr .u { font-size: 18px; }
.dh-stage .lay-list.n-md .li .tag { font-size: 17px; }
.dh-stage .lay-list.n-md .li .was { font-size: 27px; }
.dh-stage .lay-list.n-sm .li .nm,
.dh-stage .lay-list.n-sm .li .pr { font-size: 36px; }
.dh-stage .lay-list.n-sm .li .pr .u { font-size: 16px; }
.dh-stage .lay-list.n-sm .li .tag { font-size: 15px; }
.dh-stage .lay-list.n-sm .li .was { font-size: 23px; }

/* ---------- 2) un producto ---------- */
.dh-stage .lay-one { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 58px; gap: 9px; }
.dh-stage .lay-one .nm { font-family: "Archivo Black", Impact, sans-serif; font-size: 129px; line-height: .92; text-transform: uppercase; text-wrap: balance; max-width: 92%; }
.dh-stage .lay-one .pr { font-family: "Archivo Black", Impact, sans-serif; font-size: 207px; line-height: .9; color: var(--amber); font-variant-numeric: tabular-nums; }
.dh-stage .lay-one .pr .u { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 52px; color: var(--chalk-soft); }
.dh-stage .lay-one .desc {
  font-family: "Figtree", sans-serif; font-weight: 600; font-size: 44px; line-height: 1.15;
  color: var(--chalk-soft); text-wrap: balance; max-width: 80%; margin-top: 4px;
}
.dh-stage .lay-one .sub { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 29px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-soft); }

/* ---------- 3) oferta ---------- */
.dh-stage .lay-of { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 58px; position: relative; }
.dh-stage .lay-of .ribbon {
  font-family: "Archivo Black", Impact, sans-serif; font-size: 40px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--tomato); color: #fff; padding: 8px 26px; border-radius: 12px;
  transform: rotate(-2deg); box-shadow: 0 9px 26px rgba(0,0,0,.3); margin-bottom: 17px;
}
.dh-stage .lay-of .nm { font-family: "Archivo Black", Impact, sans-serif; font-size: 104px; line-height: .95; text-transform: uppercase; text-wrap: balance; max-width: 90%; }
.dh-stage .lay-of .prices { display: flex; align-items: baseline; gap: 26px; margin-top: 9px; }
.dh-stage .lay-of .was { font-family: "Archivo Black", Impact, sans-serif; font-size: 69px; color: var(--chalk-soft); text-decoration: line-through; text-decoration-color: var(--tomato); text-decoration-thickness: 5px; font-variant-numeric: tabular-nums; }
.dh-stage .lay-of .now { font-family: "Archivo Black", Impact, sans-serif; font-size: 173px; line-height: .9; color: var(--amber); font-variant-numeric: tabular-nums; }
.dh-stage .lay-of .now .u { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 43px; color: var(--chalk-soft); }

/* ---------- 4) destacado + foto (pantalla partida, fondo claro) ---------- */
.dh-stage .lay-dest { height: 100%; display: flex; background: #fff; color: #191919; text-align: left; }
.dh-stage .lay-dest .left { width: 57%; display: flex; flex-direction: column; min-width: 0; }
.dh-stage .lay-dest .head {
  background: #39A64B; color: #fff; padding: 18px 49px; flex: none;
  display: flex; align-items: baseline; gap: 16px; min-width: 0;
}
.dh-stage .lay-dest .head b { font-family: "Archivo Black", Impact, sans-serif; font-size: 54px; line-height: 1; letter-spacing: .01em; }
.dh-stage .lay-dest .head span {
  font-family: "Figtree", sans-serif; font-weight: 700; font-size: 25px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-stage .lay-dest .hero { padding: 26px 49px 13px; display: flex; flex-direction: column; min-height: 0; }
.dh-stage .lay-dest .hero .nm { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 71px; line-height: 1; color: #191919; }
.dh-stage .lay-dest .hero .desc { font-family: "Figtree", sans-serif; font-size: 29px; color: #6a6a6a; margin-top: 5px; }
.dh-stage .lay-dest .hero .big { display: flex; align-items: flex-start; gap: 6px; margin-top: 13px; font-family: "Archivo Black", Impact, sans-serif; color: #2E9E43; line-height: .85; }
.dh-stage .lay-dest .hero .big .cur { font-size: 97px; margin-top: 22px; }
.dh-stage .lay-dest .hero .big .int { font-size: 205px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dh-stage .lay-dest .hero .perkg { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 31px; color: #3a3a3a; margin-top: 4px; }
.dh-stage .lay-dest .list {
  /* Arranca apenas debajo del precio y crece hacia abajo, no pegado al piso. */
  margin-top: 18px; border-top: 2px solid #e6e6e6; padding: 18px 49px 16px;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.dh-stage .lay-dest .list .listtitle {
  font-family: "Archivo Black", Impact, sans-serif; font-size: 30px; line-height: 1;
  color: #2E9E43; letter-spacing: .01em; margin-bottom: 4px;
}
.dh-stage .lay-dest .list .li { display: flex; gap: 2%; font-family: "Figtree", sans-serif; font-size: 26px; color: #333; align-items: baseline; }
.dh-stage .lay-dest .list .li .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-stage .lay-dest .list .li .p { margin-left: auto; font-weight: 800; color: #111; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-stage .lay-dest .right { width: 43%; position: relative; background: #141414; display: flex; flex-direction: column; }
.dh-stage .lay-dest .photo { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; background: #fff; }
/* La foto LLENA el panel derecho, alto y ancho completos, sin franjas vacias.
   cover recorta un poco los bordes; se prefirio eso a dejar huecos blancos. */
.dh-stage .lay-dest .photo img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.dh-stage .lay-dest .photo .ph-emoji { font-size: 324px; line-height: 1; }
.dh-stage .lay-dest .code { flex: none; background: #000; color: #fff; text-align: center; padding: 18px 33px; }
.dh-stage .lay-dest .code .lab { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 31px; letter-spacing: .02em; }
.dh-stage .lay-dest .code .num { font-family: "Archivo Black", Impact, sans-serif; font-size: 86px; line-height: 1.02; font-variant-numeric: tabular-nums; }

/* ---------- 5) foto a pantalla completa ---------- */
/* En columna: arriba el producto, abajo el nombre y el precio. Asi no se pisan
   nunca, por mas largo que sea el nombre o grande que sea el precio. */
.dh-stage .lay-foto { position: relative; height: 100%; overflow: hidden; background: #0d0d0d; color: #fff; display: flex; flex-direction: column; }
.dh-stage .lay-foto .bg {
  position: absolute; inset: -4%; background-size: cover; background-position: center;
  will-change: transform; animation: dh-kenburns 22s ease-in-out infinite alternate;
}
.dh-stage .lay-foto .bg.emoji { display: grid; place-items: center; font-size: 497px; background: radial-gradient(circle at 50% 42%, #e5473b, #7c140d); }
.dh-stage .lay-foto .bg.emoji span { filter: drop-shadow(0 22px 32px rgba(0,0,0,.4)); }
.dh-stage .lay-foto .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.82) 100%); }
.dh-stage .lay-foto .content { position: relative; z-index: 3; margin-top: auto; padding: 40px 106px 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.dh-stage .lay-foto .of-badge {
  font-family: "Archivo Black", Impact, sans-serif; font-size: 41px; letter-spacing: .05em; text-transform: uppercase;
  background: #E23A2E; color: #fff; padding: 10px 26px; border-radius: 13px;
  transform: rotate(-2.5deg); box-shadow: 0 11px 27px rgba(0,0,0,.45);
}
.dh-stage .lay-foto .nm { font-family: "Archivo Black", Impact, sans-serif; font-size: 130px; line-height: .92; text-transform: uppercase; text-wrap: balance; text-shadow: 0 5px 27px rgba(0,0,0,.65); max-width: 82%; }
.dh-stage .lay-foto .priceline { display: flex; align-items: baseline; gap: 24px; }
.dh-stage .lay-foto .price {
  display: inline-flex; align-items: baseline; gap: 6px; font-family: "Archivo Black", Impact, sans-serif;
  background: #F4C54E; color: #123524; padding: 12px 28px; border-radius: 17px; box-shadow: 0 15px 38px rgba(0,0,0,.45);
}
.dh-stage .lay-foto .price.of { background: #E23A2E; color: #fff; }
.dh-stage .lay-foto .price .cur { font-size: 70px; }
.dh-stage .lay-foto .price .int { font-size: 173px; line-height: .85; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dh-stage .lay-foto .price .u { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 45px; }
.dh-stage .lay-foto .was { font-family: "Figtree", sans-serif; font-weight: 800; font-size: 50px; color: #fff; text-decoration: line-through; text-decoration-color: #E23A2E; text-decoration-thickness: 4px; text-shadow: 0 3px 16px rgba(0,0,0,.6); }

/* ---------- firma de Senta al pie ---------- */
.dh-stage .senta {
  position: absolute; right: 34px; bottom: 22px; z-index: 4;
  display: flex; align-items: center; gap: 13px;
  font-family: "Figtree", sans-serif; font-weight: 600; font-size: 21px; line-height: 1;
  letter-spacing: .01em; pointer-events: none;
  /* Fondo oscuro (pizarra y foto): isotipo y texto en blanco. */
  color: #fff; opacity: .55; text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* El isotipo es apaisado (984x373): se fija el alto y el ancho sale solo. */
.dh-stage .senta .mk { height: 30px; width: auto; flex: none; display: block; }
/* "Destacado" apoya la firma sobre la columna blanca: verde de marca, sin
   transparencia, para que se lea igual de bien que sobre fondo oscuro. */
.dh-stage.at-dest .senta { right: auto; left: 49px; bottom: 20px; color: #25935A; opacity: 1; text-shadow: none; }
.dh-stage.at-foto .senta { opacity: .62; bottom: 26px; }

/* Zoom lento y corto: se mueve lo justo para que la pantalla no quede muerta,
   sin comerse la foto. */
@keyframes dh-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.09) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-stage .lay-foto .bg { animation: none; transform: scale(1); }
  .dh-layer { transition: none; }
}