/* Estilos de las plantillas. Todo está pensado sobre un lienzo de 1920x1080. */
.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  line-height: 1.2;
  --accent: #f59e0b;
}
.stage * { box-sizing: border-box; }
.stage .bg, .stage .dim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.stage .bg { background-size: cover; background-position: center; }
.stage .dim { background: #000; }
.stage .content {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  padding: 110px 130px;
  display: flex; flex-direction: column; justify-content: center;
}
.stage .content.lay-imagen, .stage .content.lay-video, .stage .content.lay-dividido { padding: 0; }
.stage .logo {
  position: absolute; top: 56px; right: 70px; z-index: 2;
  max-width: 300px; max-height: 140px; object-fit: contain;
}
.stage .placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 200px;
  font-size: 56px; opacity: .4;
  border: 6px dashed currentColor; border-radius: 24px;
}

/* Tipografía base */
.stage h1.title { font-size: 116px; font-weight: 800; letter-spacing: -1px; margin: 0 0 34px; line-height: 1.05; }
.stage h1.title:after {
  content: ''; display: block;
  width: 160px; height: 12px; border-radius: 6px;
  background: var(--accent); margin-top: 36px;
}
.stage .subtitle { font-size: 60px; font-weight: 600; color: var(--accent); margin: 0 0 28px; }
.stage .body { font-size: 48px; line-height: 1.35; opacity: .92; margin: 0; max-width: 1500px; }

/* Anuncio */
.l-anuncio { display: flex; align-items: center; height: 100%; }
.l-anuncio .ann-text { flex: 1; min-width: 0; }
.l-anuncio .ann-img { flex: 0 0 680px; height: 820px; margin-left: 90px; }
.l-anuncio .ann-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; }

/* Menú */
.l-menu { display: flex; flex-direction: column; height: 100%; }
.l-menu h1.title { font-size: 100px; margin-bottom: 20px; }
.l-menu h1.title:after { margin-top: 26px; }
.m-list { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.m-list.two { display: block; column-count: 2; column-gap: 120px; padding-top: 30px; }
.m-row { display: flex; align-items: flex-end; font-size: 54px; padding: 18px 0; break-inside: avoid; -webkit-column-break-inside: avoid; }
.m-list.small .m-row { font-size: 38px; padding: 9px 0; }
.m-name { font-weight: 600; }
.m-desc { font-size: .6em; font-weight: 400; opacity: .7; margin-top: 6px; }
.m-dots { flex: 1; min-width: 40px; border-bottom: 4px dotted currentColor; opacity: .35; margin: 0 24px 14px; }
.m-price { color: var(--accent); font-weight: 800; white-space: nowrap; }
.l-menu .note { font-size: 36px; opacity: .75; margin-top: 24px; }

/* Imagen / video a pantalla completa */
.l-full { position: relative; width: 100%; height: 100%; }
.l-full img, .l-full video { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-full .placeholder { border: none; border-radius: 0; }
.l-full .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 120px 130px 60px;
  font-size: 58px; font-weight: 700; color: #fff;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.78));
}

/* Imagen + texto */
.l-split { display: flex; height: 100%; }
.split-img { flex: 0 0 48%; background-size: cover; background-position: center; }
.split-img .placeholder { border-radius: 0; border: none; }
.split-text { flex: 1; padding: 110px 120px; display: flex; flex-direction: column; justify-content: center; }
.split-text h1.title { font-size: 100px; }

/* Reloj */
.l-clock { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; }
.clock-title { font-size: 76px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.clock-time { font-size: 340px; font-weight: 800; line-height: 1; letter-spacing: -6px; font-variant-numeric: tabular-nums; }
.clock-time .sec { font-size: 120px; opacity: .55; letter-spacing: 0; }
.clock-date { font-size: 64px; margin-top: 24px; opacity: .85; }
.clock-msg { font-size: 46px; line-height: 1.35; margin-top: 64px; opacity: .8; max-width: 1500px; }

/* Fuente de títulos (la plantilla "Halloween" usa una distinta a la del texto) */
.stage h1.title, .stage .promo-title, .stage .clock-title { font-family: var(--title-font, inherit); }

/* ---------- TV + promoción (YouTube a la izquierda, promo a la derecha) ---------- */
.stage .content.lay-tv, .stage .content.lay-promo { padding: 0; }
.l-tv, .l-promo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
/* El recuadro del video mide exactamente 16:9 (1440x810): sin franjas negras */
.tv-main {
  position: absolute; left: 0; top: 0; width: 1440px; height: 810px;
  background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Debajo del video: título y fecha de la promo + cinta */
.tv-bottom { position: absolute; left: 0; top: 810px; width: 1440px; bottom: 0; display: flex; flex-direction: column; }
.tv-head { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 56px; }
.tv-head .promo-title { font-size: 66px; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-head .promo-sub { font-size: 32px; margin: 0; }
.tv-bottom .cinta { position: relative; left: auto; right: auto; bottom: auto; flex: 0 0 96px; height: 96px; line-height: 96px; font-size: 42px; }
.tv-main .tv-video { width: 1440px; height: 810px; border: 0; display: block; background: #000; }
.tv-main video.tv-video { object-fit: cover; }
.tv-main .placeholder { width: 1200px; height: 600px; color: #fff; }
.tv-main .yt-thumb {
  background-color: #111; background-size: cover; background-position: center; background-repeat: no-repeat;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.yt-play { width: 170px; height: 120px; border-radius: 34px; background: #ff0033; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.yt-play:after { content: ''; position: absolute; left: 68px; top: 32px; border-style: solid; border-width: 28px 0 28px 48px; border-color: transparent transparent transparent #fff; }
.yt-label { position: absolute; bottom: 40px; font-size: 44px; color: #fff; font-weight: 700; }
.tv-side {
  position: absolute; right: 0; top: 0; bottom: 0; width: 480px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 36px 38px;
  border-left: 8px solid var(--accent);
}
.l-tv.cc .tv-main, .l-tv.cc .tv-side { bottom: 100px; }

/* Bloque de promoción */
.promo { display: flex; flex-direction: column; }
.promo-tag {
  display: inline-block; align-self: flex-start; font-size: 24px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--bg); background: var(--accent); padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
}
.promo-title { font-size: 62px; line-height: 1; margin: 0 0 14px; font-weight: 800; }
.promo-sub { font-size: 30px; font-weight: 700; color: var(--accent); margin-bottom: 10px; line-height: 1.2; }
.promo-price { font-size: 110px; font-weight: 800; line-height: 1; color: var(--accent); margin: 6px 0 8px; letter-spacing: -2px; }
.promo-text { font-size: 26px; line-height: 1.3; opacity: .9; }
.promo-side { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 22px; }
.promo-img { max-width: 100%; max-height: 170px; object-fit: contain; display: block; }
.promo-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.promo-qr .qr-svg { width: 230px; height: 230px; display: block; border-radius: 18px; box-shadow: 0 0 0 6px var(--accent); }
.promo-qr span { font-size: 24px; font-weight: 800; text-align: center; line-height: 1.2; }

/* Promoción con QR a pantalla completa (horizontal): textos a la izquierda, imagen y QR a la derecha */
.l-promo .promo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; flex-direction: row; align-items: center; padding: 90px 120px; gap: 90px; }
.l-promo.cc .promo { bottom: 100px; }
.l-promo .promo-info { flex: 1; min-width: 0; }
.l-promo .promo-tag { font-size: 30px; }
.l-promo .promo-title { font-size: 120px; margin-bottom: 26px; }
.l-promo .promo-sub { font-size: 50px; }
.l-promo .promo-price { font-size: 190px; margin: 16px 0; }
.l-promo .promo-text { font-size: 40px; max-width: 980px; }
.l-promo .promo-side { flex: 0 0 520px; margin: 0; gap: 26px; }
.l-promo .promo-img { max-height: 330px; }
.l-promo .promo-qr .qr-svg { width: 380px; height: 380px; border-radius: 26px; box-shadow: 0 0 0 10px var(--accent); }
.l-promo .promo-qr span { font-size: 36px; }
.align-center .l-promo .promo-info { text-align: center; }
.align-center .l-promo .promo-tag { align-self: center; }

/* Cinta que corre abajo */
.cinta {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px; overflow: hidden;
  background: var(--accent); color: var(--bg); font-size: 44px; font-weight: 800; line-height: 100px; white-space: nowrap;
}
.cinta-mov { display: inline-block; white-space: nowrap; -webkit-animation: cinta 30s linear infinite; animation: cinta 30s linear infinite; }
.cinta-mov span { display: inline-block; padding-right: 160px; }
@-webkit-keyframes cinta { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Movimiento en la promo (para llamar la atención) ----------
   Solo transform/opacity: lo más liviano para TV modestos. */
.anim .promo-img { -webkit-animation: flotar 4s ease-in-out infinite; animation: flotar 4s ease-in-out infinite; }
.anim .promo-price { display: inline-block; -webkit-transform-origin: left center; transform-origin: left center;
  -webkit-animation: latir 2.4s ease-in-out infinite; animation: latir 2.4s ease-in-out infinite; }
.align-center .anim .promo-price, .vertical .l-promo.anim .promo-price { -webkit-transform-origin: center; transform-origin: center; }
.anim .promo-tag { position: relative; overflow: hidden; }
.anim .promo-tag:after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  -webkit-animation: barrido 3.4s ease-in-out infinite; animation: barrido 3.4s ease-in-out infinite;
}
.anim .promo-qr { -webkit-animation: llamar 3s ease-in-out infinite; animation: llamar 3s ease-in-out infinite; }
.anim .promo-qr span { -webkit-animation: rebote 1.6s ease-in-out infinite; animation: rebote 1.6s ease-in-out infinite; }
.tv-side .promo, .tv-alt { -webkit-animation: entrar .8s ease-out both; animation: entrar .8s ease-out both; }
@-webkit-keyframes flotar { 0%, 100% { -webkit-transform: translateY(0) rotate(-4deg); } 50% { -webkit-transform: translateY(-16px) rotate(4deg); } }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
@-webkit-keyframes latir { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.08); } }
@keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@-webkit-keyframes barrido { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes barrido { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@-webkit-keyframes llamar { 0%, 70%, 100% { -webkit-transform: scale(1); } 80% { -webkit-transform: scale(1.06) rotate(-2deg); } 90% { -webkit-transform: scale(1.06) rotate(2deg); } }
@keyframes llamar { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.06) rotate(-2deg); } 90% { transform: scale(1.06) rotate(2deg); } }
@-webkit-keyframes rebote { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-6px); } }
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@-webkit-keyframes entrar { from { opacity: 0; -webkit-transform: translateX(40px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* Otros contenidos que rotan dentro de la banda lateral (los dibuja la página del TV) */
.tv-side { overflow: hidden; }
/* La tarjeta toma la forma exacta del contenido: 9:16 (av) o 16:9 (ah), centrada, sin franjas */
.tv-alt { position: absolute; top: 24px; left: 24px; right: 24px; bottom: 24px; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.tv-alt.av { top: 50%; bottom: auto; height: 768px; margin-top: -384px; }
.tv-alt.ah { top: 50%; bottom: auto; height: 243px; margin-top: -122px; }
.vertical .tv-alt.av { top: 40px; bottom: 40px; height: auto; margin-top: 0; left: 50%; right: auto; width: 630px; margin-left: -315px; }
.vertical .tv-alt.ah { left: 40px; right: 40px; height: 563px; margin-top: -282px; }

/* ---------- Decoración "Molar": crema, manchas pastel suaves y la franja de colores del logo ---------- */
.stage.deco-molar {
  background-image: linear-gradient(135deg, #FFF9F2 0%, #F6F0FF 52%, #FFF1E8 100%) !important;
}
.deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.deco span { position: absolute; border-radius: 50%; }
.deco .b1 { width: 900px; height: 900px; right: -260px; top: -360px; background: radial-gradient(circle, rgba(201,184,255,.55) 0%, rgba(201,184,255,0) 68%); }
.deco .b2 { width: 760px; height: 760px; left: -240px; bottom: -320px; background: radial-gradient(circle, rgba(255,194,223,.5) 0%, rgba(255,194,223,0) 68%); }
.deco .b3 { width: 560px; height: 560px; left: 46%; bottom: -260px; background: radial-gradient(circle, rgba(255,208,176,.45) 0%, rgba(255,208,176,0) 68%); }
.deco .franja { position: absolute; top: 0; left: 0; right: 0; height: 16px; display: flex; }
.deco .franja i { flex: 1; display: block; }
.deco-molar .content { z-index: 1; }
.deco-molar h1.title, .deco-molar .promo-title { letter-spacing: -2px; font-weight: 800; }
.deco-molar h1.title:after { height: 10px; width: 140px; }
.deco-molar .promo-tag { color: #fff; letter-spacing: 2px; }
.deco-molar .promo-sub { color: #C0679A; }
.deco-molar .promo-price { color: var(--accent); }
@supports (-webkit-background-clip: text) {
  .deco-molar .promo-price, .deco-molar .m-price {
    background: linear-gradient(100deg, #6F5BD6, #C0679A 55%, #CF8657);
    -webkit-background-clip: text; color: transparent;
  }
}
.deco-molar .promo-qr .qr-svg { box-shadow: 0 0 0 6px #fff, 0 18px 40px rgba(26, 15, 60, .18); }
.deco-molar .promo-qr span { color: var(--accent); }
.deco-molar .tv-side { border-left: 0; background: rgba(255, 255, 255, .55); }
.deco-molar .tv-main { box-shadow: 8px 0 0 #fff; }
.deco-molar .cinta { color: #fff; }
.deco-molar .m-dots { opacity: .25; }
.deco-molar .logo { max-width: 340px; max-height: 130px; top: 60px; }
.vertical.deco-molar .logo { max-width: 360px; max-height: 130px; top: 60px; right: 60px; }
.promo-logo { display: block; max-width: 300px; max-height: 110px; object-fit: contain; margin-bottom: 26px; }
.l-promo .promo-logo { max-width: 340px; max-height: 120px; margin-bottom: 30px; }
.vertical .l-promo .promo-logo, .align-center .l-promo .promo-logo { margin-left: auto; margin-right: auto; }

/* Banda lateral centrada (logo, etiqueta, precio, texto, imagen y QR alineados al centro) */
.tv-side .promo-info { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tv-side .promo-tag { align-self: center; }
.tv-side .promo-logo { margin-left: auto; margin-right: auto; }
.tv-side .promo-side { align-items: center; }
.anim .tv-side .promo-price { -webkit-transform-origin: center; transform-origin: center; }
/* Panel lateral del diseño TV: más compacto (lleva logo, textos, imagen y QR en 480 px) */
.tv-side { padding: 28px 34px; }
.tv-side .promo-logo { max-width: 230px; max-height: 76px; margin-bottom: 16px; }
.tv-side .promo-tag { font-size: 20px; margin-bottom: 12px; }
.tv-side .promo-title { font-size: 52px; margin-bottom: 10px; }
.tv-side .promo-sub { font-size: 26px; }
.tv-side .promo-price { font-size: 92px; margin: 2px 0 6px; }
.tv-side .promo-text { font-size: 23px; }
.tv-side .promo-side { margin-top: 14px; gap: 10px; }
.tv-side .promo-img { max-height: 120px; }
.tv-side .promo-qr .qr-svg { width: 196px; height: 196px; }
.tv-side .promo-qr span { font-size: 21px; }
/* Horizontal: el panel ocupa todo el alto (el título va debajo del video), así que hay más lugar */
.stage:not(.vertical) .tv-side .promo-logo { max-width: 300px; max-height: 100px; margin-bottom: 22px; }
.stage:not(.vertical) .tv-side .promo-tag { font-size: 22px; margin-bottom: 16px; }
.stage:not(.vertical) .tv-side .promo-price { font-size: 130px; margin: 4px 0 10px; }
.stage:not(.vertical) .tv-side .promo-text { font-size: 25px; }
.stage:not(.vertical) .tv-side .promo-side { margin-top: 22px; gap: 14px; }
.stage:not(.vertical) .tv-side .promo-img { max-height: 190px; }
.stage:not(.vertical) .tv-side .promo-qr .qr-svg { width: 250px; height: 250px; }
.stage:not(.vertical) .tv-side .promo-qr span { font-size: 23px; }
.vertical .tv-side .promo-logo { max-width: 360px; max-height: 130px; }

/* ---------- Formato vertical (1080x1920) ----------
   Mismos diseños, reacomodados para una pantalla alta y angosta. */
.stage.vertical { width: 1080px; height: 1920px; }
.vertical .content { padding: 150px 90px; }
.vertical .logo { top: 50px; right: 50px; max-width: 240px; max-height: 120px; }
.vertical h1.title { font-size: 104px; }
.vertical .subtitle { font-size: 56px; }
.vertical .body { font-size: 46px; max-width: none; }
/* Anuncio: la imagen va arriba y el texto debajo */
.vertical .l-anuncio { flex-direction: column; justify-content: center; }
.vertical .l-anuncio .ann-text { flex: 0 0 auto; width: 100%; }
.vertical .l-anuncio .ann-img { order: -1; flex: 0 0 auto; width: 100%; height: 760px; margin: 0 0 80px; }
/* Menú: una sola columna, cabe mucho más hacia abajo */
.vertical .l-menu h1.title { font-size: 96px; }
.vertical .m-list.two { display: flex; flex-direction: column; justify-content: center; column-count: 1; padding-top: 0; }
.vertical .m-row { font-size: 50px; padding: 20px 0; }
.vertical .m-list.two .m-row { font-size: 42px; padding: 12px 0; }
.vertical .m-list.small .m-row { font-size: 32px; padding: 6px 0; }
.vertical .m-dots { margin: 0 18px 12px; }
/* Imagen + texto: imagen arriba, texto abajo */
.vertical .l-split { flex-direction: column; }
.vertical .split-img { flex: 0 0 46%; }
.vertical .split-text { padding: 90px; }
.vertical .split-text h1.title { font-size: 92px; }
.vertical .l-full .caption { padding: 140px 90px 90px; font-size: 54px; }
/* Reloj */
.vertical .clock-time { font-size: 250px; letter-spacing: -4px; }
.vertical .clock-time .sec { font-size: 90px; }
.vertical .clock-date { font-size: 54px; }
.vertical .clock-msg { max-width: none; }
/* TV + promoción: video arriba, promo abajo */
.vertical .l-tv .tv-main { width: auto; right: 0; bottom: auto; height: 608px; }
.vertical .tv-bottom { display: none; }
.vertical .l-tv.cc .tv-main { bottom: auto; }
.vertical .tv-main .tv-video { width: 1080px; height: 608px; }
.vertical .tv-main .placeholder { width: 900px; height: 450px; }
.vertical .tv-side { top: 608px; left: 0; width: auto; border-left: 0; border-top: 10px solid var(--accent); padding: 40px 70px; }
.vertical .l-tv.cc .tv-side { bottom: 110px; }
.vertical .tv-side .promo-tag { font-size: 30px; }
.vertical .tv-side .promo-title { font-size: 84px; }
.vertical .tv-side .promo-sub { font-size: 40px; }
.vertical .tv-side .promo-price { font-size: 128px; }
.vertical .tv-side .promo-text { font-size: 34px; }
.vertical .tv-side .promo-side { flex-direction: row; justify-content: center; gap: 50px; margin-top: 28px; }
.vertical .tv-side .promo-img { max-height: 250px; max-width: 320px; }
.vertical .tv-side .promo-qr .qr-svg { width: 290px; height: 290px; }
.vertical .tv-side .promo-qr span { font-size: 32px; }
/* Promoción con QR: todo en columna, centrado */
.vertical .l-promo .promo { flex-direction: column; justify-content: center; padding: 110px 80px 70px; gap: 36px; text-align: center; }
.vertical .l-promo.cc .promo { bottom: 110px; }
.vertical .l-promo .promo-info { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.vertical .l-promo .promo-tag { align-self: center; }
.vertical .l-promo .promo-title { font-size: 112px; margin-bottom: 20px; }
.vertical .l-promo .promo-sub { font-size: 50px; }
.vertical .l-promo .promo-price { font-size: 170px; margin: 10px 0; }
.vertical .l-promo .promo-text { font-size: 38px; max-width: none; }
.vertical .l-promo .promo-side { flex: 0 0 auto; gap: 22px; }
.vertical .l-promo .promo-img { max-height: 300px; }
.vertical .l-promo .promo-qr .qr-svg { width: 360px; height: 360px; }
.vertical .l-promo .promo-qr span { font-size: 34px; }
.vertical .cinta { height: 110px; line-height: 110px; font-size: 48px; }

/* Alineación centrada */
.align-center .content { text-align: center; align-items: center; }
.align-center h1.title:after { margin-left: auto; margin-right: auto; }
.align-center .body { margin-left: auto; margin-right: auto; }
.align-center .l-anuncio .ann-text { text-align: center; }
.align-center .split-text { align-items: center; text-align: center; }