/* ─────────────────────────────────────────────
 *  Cartelería digital — estilos de las plantillas
 *  Compartidos por la TV y por la previsualización del editor.
 *
 *  Las placas se dibujan SIEMPRE sobre un lienzo de 1920x1080 y se escalan
 *  con transform. Así el diseño es idéntico en el preview de un celular,
 *  en una TV Full HD y en una 4K: se escala, no se re-maqueta.
 *  ───────────────────────────────────────────── */

.cz-canvas {
  width: 1920px; height: 1080px;
  position: relative; overflow: hidden;
  transform-origin: top left;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #07040f; color: #fff;
}

/* Capas de la playlist (crossfade sin acumular nodos) */
/* La transición es encadenada (sale una, entra la otra), por eso cada mitad dura
   ~.3s: el cambio completo queda en ~.65s sin que se superpongan los textos. */
.cz-canvas .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; will-change: opacity; }
.cz-canvas .layer.on { opacity: 1; }
.cz-canvas .layer.tr-none { transition: none; }
.cz-canvas .layer.tr-slide { transition: opacity .3s ease, transform .3s ease; transform: translateX(70px); }
.cz-canvas .layer.tr-slide.on { transform: translateX(0); }

/* ── Placa ── */
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 90px; gap: 22px;
  background: var(--bg, #07040f); color: var(--fg, #fff);
}
.slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent, #f59e0b) 16%, transparent) 0%, transparent 62%);
}
.slide > * { position: relative; z-index: 1; }

.s-titulo  { font-size: 62px;  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
             color: var(--accent, #f59e0b); line-height: 1.1; }
.s-nombre  { font-size: 132px; font-weight: 900; line-height: 1.02; letter-spacing: -.02em; max-width: 92%; }
.s-desc    { font-size: 40px;  font-weight: 500; opacity: .82; max-width: 78%; line-height: 1.35; }
.s-detalle { font-size: 46px;  font-weight: 600; opacity: .9;  max-width: 82%; line-height: 1.3; }
.s-precio  { font-size: 190px; font-weight: 900; color: var(--accent, #f59e0b); line-height: 1;
             letter-spacing: -.03em; text-shadow: 0 8px 24px rgba(0,0,0,.45); }
.s-nota    { font-size: 30px;  font-weight: 600; opacity: .62; letter-spacing: .05em; text-transform: uppercase; }

/* La foto es lo que vende: NO se la deja encoger. Con flex-shrink activo,
   flexbox descargaba todo el ajuste sobre la imagen (el texto no puede achicarse)
   y una foto de 400px terminaba en 184px. En su lugar, cada plantilla declara
   cuánto alto le sobra para la foto según cuánto texto lleva. */
.s-img  { max-width: 62%; max-height: 420px; object-fit: contain; border-radius: 16px;
          flex-shrink: 0;
          filter: drop-shadow(0 18px 36px rgba(0,0,0,.55)); }

/* Alto disponible para la foto, calculado por plantilla sobre el lienzo de 1080 */
.tpl-producto-precio  .s-img { max-height: 420px; }
.tpl-producto-oferta  .s-img { max-height: 400px; }
.tpl-combo            .s-img { max-height: 340px; }
.tpl-promo-2x1        .s-img { max-height: 210px; }
.tpl-texto-imagen     .s-img { max-height: 540px; }
.tpl-producto-imagen  .s-img { max-height: 560px; max-width: 100%; }

/* En la 2x1 el número gigante compite con la foto: se lo baja un poco. */
.tpl-promo-2x1 .s-2x1 { font-size: 190px; }
.s-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Oferta antes / ahora */
.s-antes { font-size: 86px; font-weight: 700; opacity: .55; position: relative; display: inline-block; line-height: 1; }
.s-antes::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: 7px;
                  background: #ef4444; transform: rotate(-7deg); }
.s-flechas { font-size: 38px; opacity: .5; letter-spacing: .4em; }

/* 2x1 */
.s-2x1 { font-size: 250px; font-weight: 900; color: var(--accent, #f59e0b); line-height: .95; letter-spacing: -.04em; }

.s-row { display: flex; align-items: center; justify-content: center; gap: 70px; width: 100%; flex-wrap: wrap; }
.s-col { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 1 1 40%; min-width: 0; }

/* ─────────────────────────────────────────────
 *  MOVIMIENTO
 *  Sólo se animan transform y opacity: la GPU las resuelve sin repintar, así una
 *  TV barata o un TV Box viejo no se ahogan corriendo esto 12 horas seguidas.
 *  ───────────────────────────────────────────── */

/* Fondo en video (el recurso pesado va detrás de todo, silenciado y en bucle) */
.slide > .s-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.slide.con-video::after {
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.75) 100%);
}

/* ── Ken Burns: la foto respira. Es lo que hace que un cartel no parezca un PDF ── */
@keyframes czKenBurns {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  50%  { transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1)    translate3d(0, 0, 0); }
}
.anim-zoom .s-img,
.anim-ambas .s-img,
.anim-zoom .s-full,
.anim-ambas .s-full,
.anim-zoom .s-video,
.anim-ambas .s-video { animation: czKenBurns 18s ease-in-out infinite; will-change: transform; }

/* ── Entrada escalonada: cada elemento aparece un instante después del anterior ── */
@keyframes czEntra {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes czEntraPrecio {
  0%   { opacity: 0; transform: scale(.82); }
  70%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.anim-entrada .s-titulo, .anim-ambas .s-titulo,
.anim-entrada .s-nombre, .anim-ambas .s-nombre,
.anim-entrada .s-desc,   .anim-ambas .s-desc,
.anim-entrada .s-detalle,.anim-ambas .s-detalle,
.anim-entrada .s-nota,   .anim-ambas .s-nota,
.anim-entrada .s-row,    .anim-ambas .s-row,
.anim-entrada .s-img,    .anim-ambas .s-img {
  animation: czEntra .62s cubic-bezier(.22,1,.36,1) both;
}
.anim-entrada .s-titulo,  .anim-ambas .s-titulo  { animation-delay: .05s; }
.anim-entrada .s-img,     .anim-ambas .s-img     { animation-delay: .14s; }
.anim-entrada .s-nombre,  .anim-ambas .s-nombre  { animation-delay: .22s; }
.anim-entrada .s-desc,    .anim-ambas .s-desc,
.anim-entrada .s-detalle, .anim-ambas .s-detalle { animation-delay: .32s; }
.anim-entrada .s-row,     .anim-ambas .s-row     { animation-delay: .40s; }
.anim-entrada .s-nota,    .anim-ambas .s-nota    { animation-delay: .58s; }

/* El precio entra con un rebote corto: es el dato que tiene que capturar la vista */
.anim-entrada .s-precio, .anim-ambas .s-precio,
.anim-entrada .s-2x1,    .anim-ambas .s-2x1 {
  animation: czEntraPrecio .66s cubic-bezier(.34,1.56,.64,1) .46s both;
}
/* Ken Burns y entrada a la vez: el zoom arranca cuando terminó de aparecer */
.anim-ambas .s-img { animation: czEntra .62s cubic-bezier(.22,1,.36,1) .14s both,
                                czKenBurns 18s ease-in-out 1s infinite; }

/* ── Brillo que barre el precio, como los menú-boards de las cadenas ── */
@keyframes czBrillo { 0% { background-position: -140% 0; } 60%, 100% { background-position: 240% 0; } }
.anim-entrada .s-precio, .anim-ambas .s-precio,
.anim-entrada .s-2x1,    .anim-ambas .s-2x1 {
  background-image: linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: currentColor;
}
.anim-entrada .s-precio, .anim-ambas .s-precio,
.anim-entrada .s-2x1,    .anim-ambas .s-2x1 {
  animation: czEntraPrecio .66s cubic-bezier(.34,1.56,.64,1) .46s both,
             czBrillo 4.5s ease-in-out 1.4s infinite;
}


/* Icono grande: reemplaza a la foto cuando no hay una. Se anima igual que la imagen. */
.s-icono { font-size: 210px; line-height: 1; filter: drop-shadow(0 14px 28px rgba(0,0,0,.5)); }
.anim-zoom .s-icono, .anim-ambas .s-icono { animation: czKenBurns 18s ease-in-out infinite; }
.anim-entrada .s-icono, .anim-ambas .s-icono { animation: czEntra .62s cubic-bezier(.22,1,.36,1) .14s both; }
.anim-ambas .s-icono { animation: czEntra .62s cubic-bezier(.22,1,.36,1) .14s both,
                                  czKenBurns 18s ease-in-out 1s infinite; }


/* ─────────────────────────────────────────────
 *  Plantilla "mitad": foto a sangre de un lado, texto del otro.
 *  La foto no tiene margen ni borde — llega hasta el filo de la pantalla, que es
 *  lo que hace que se vea grande de verdad.
 *  ───────────────────────────────────────────── */
.tpl-mitad { flex-direction: row; padding: 0; gap: 0; align-items: stretch; }
.tpl-mitad .s-media { flex: 0 0 50%; height: 100%; overflow: hidden; position: relative; z-index: 1; }
.tpl-mitad .s-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-mitad .s-media-ico { display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, #f59e0b) 14%, var(--bg, #07040f)); }
.tpl-mitad .s-media-ico span { font-size: 300px; line-height: 1; }

 /* z-index 2, por encima de la foto: con la foto a la derecha el DOM queda
    (texto, foto) y, a igual z-index, la foto se pintaba ENCIMA del degradado y
    dejaba un corte duro. Con el texto arriba, el difuminado funciona de los dos lados. */
.tpl-mitad .s-lado { flex: 0 0 50%; height: 100%; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; text-align: left;
  padding: 70px 80px; gap: 20px; position: relative; z-index: 2; }
/* Media pantalla es más angosta: el texto se ajusta para no romper el equilibrio */
.tpl-mitad .s-titulo  { font-size: 46px; letter-spacing: .14em; }
.tpl-mitad .s-nombre  { font-size: 104px; max-width: 100%; line-height: .98; }
.tpl-mitad .s-desc    { font-size: 34px; max-width: 100%; }
.tpl-mitad .s-precio  { font-size: 168px; }
.tpl-mitad .s-antes   { font-size: 60px; }
.tpl-mitad .s-nota    { font-size: 26px; }
/* Un degradado suave donde se tocan foto y texto, para que no quede un corte duro */
/* Difuminado en la costura entre foto y texto. Va sobre la foto, no al lado,
   para que la transición sea gradual y no un borde. */
.tpl-mitad.lado-izq .s-lado::before,
.tpl-mitad.lado-der .s-lado::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 150px; pointer-events: none; z-index: 1;
}
.tpl-mitad.lado-izq .s-lado::before { left: -150px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bg, #07040f) 55%, transparent) 45%, var(--bg, #07040f) 100%); }
.tpl-mitad.lado-der .s-lado::before { right: -150px;
  background: linear-gradient(270deg, transparent 0%, color-mix(in srgb, var(--bg, #07040f) 55%, transparent) 45%, var(--bg, #07040f) 100%); }
/* El contenido del texto por encima del propio degradado */
.tpl-mitad .s-lado > * { position: relative; z-index: 2; }
.tpl-mitad::after { display: none; }   /* el resplandor central estorba en este layout */

/* ── "foto-fondo": la imagen cubre todo y el texto va encima ── */
.tpl-foto-fondo { padding: 0; }
.tpl-foto-fondo .s-encima { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; width: 100%; height: 100%;
  padding: 60px 90px; text-shadow: 0 4px 24px rgba(0,0,0,.75); }
/* El velo tiene que ser fuerte de verdad: sobre una foto con mucho detalle
   (espuma, latte art) un degradado suave deja el texto ilegible. */
.tpl-foto-fondo::after {
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 38%,
                                      rgba(0,0,0,.78) 68%, rgba(0,0,0,.92) 100%);
}
.tpl-foto-fondo .s-encima { text-shadow: 0 4px 30px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.9); }

/* El Ken Burns de la foto a sangre se aplica al <img> de adentro */
.anim-zoom  .s-media img,
.anim-ambas .s-media img { animation: czKenBurns 18s ease-in-out infinite; will-change: transform; }

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .cz-canvas * { animation: none !important; }
}