/* Publicidad para empresas -------------------------------------------------
   Feature styles are deliberately namespaced so this module can be loaded
   after the global Graphite theme without changing the rest of the studio. */

.sidebar-nav {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  padding-right: 2px;
  scrollbar-width: thin;
}

.business-advertising {
  --business-blue: #168cff;
  --business-blue-light: #6dbbff;
  --business-ink: #f5f7fb;
  --business-muted: #8f96a2;
  --business-line: rgba(255, 255, 255, .11);
  --business-panel: rgba(15, 17, 21, .92);
  width: 100%;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  color: var(--business-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(22, 140, 255, .12), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(99, 82, 238, .11), transparent 24%),
    linear-gradient(180deg, #090b0f 0%, #060709 54%, #090a0d 100%);
}

.business-advertising[hidden] {
  display: none;
}

.business-advertising [hidden] {
  display: none !important;
}

.business-advertising *,
.business-advertising *::before,
.business-advertising *::after {
  box-sizing: border-box;
}

.business-advertising :is(button, input, textarea, select) {
  font: inherit;
}

.business-advertising-inner {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 34px 34px 72px;
}

.business-advertising-hero {
  position: relative;
  min-height: 292px;
  overflow: hidden;
  padding: 42px clamp(30px, 4.6vw, 72px);
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background:
    linear-gradient(115deg, rgba(18, 21, 27, .98) 0%, rgba(12, 15, 20, .95) 52%, rgba(9, 20, 35, .95) 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
  isolation: isolate;
}

.business-advertising-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  right: -130px;
  top: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 140, 255, .3), rgba(74, 68, 218, .13) 42%, transparent 69%);
  filter: blur(3px);
}

.business-advertising-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent 48%, #000 100%);
}

.business-advertising-hero-copy {
  position: relative;
  z-index: 2;
  width: min(650px, 59%);
}

.business-advertising-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #8dcaff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.business-advertising-kicker .icon {
  width: 15px;
  height: 15px;
}

.business-advertising-hero h1 {
  max-width: 640px;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4.5vw, 67px);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: .96;
}

.business-advertising-hero h1 em {
  color: transparent;
  background: linear-gradient(100deg, #9bd5ff, #4ea8ff 48%, #a58cff);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

.business-advertising-hero-copy > p {
  max-width: 590px;
  margin: 19px 0 0;
  color: #a5abb5;
  font-size: 14px;
  line-height: 1.65;
}

.business-advertising-promises {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.business-advertising-promises span {
  min-height: 31px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c4cad2;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  font-size: 9px;
  font-weight: 700;
}

.business-advertising-promises .icon {
  width: 12px;
  height: 12px;
  color: #73bbff;
}

.business-advertising-hero-art {
  position: absolute;
  z-index: 1;
  right: clamp(11px, calc(6vw - 14px), 81px);
  top: 31px;
  width: min(36vw, 470px);
  height: 288px;
  perspective: 900px;
}

.business-hero-card {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 13px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.1);
}

.business-hero-card::before,
.business-hero-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(.2px);
}

.business-hero-card-back {
  right: 3px;
  top: 10px;
  width: 194px;
  height: 251px;
  padding: 24px 18px;
  color: #13141a;
  background: linear-gradient(145deg, #ffdb4f, #ff9852 56%, #ff5b73);
  transform: rotate(9deg) translateZ(-30px);
}

.business-hero-card-back::before {
  width: 130px;
  height: 130px;
  right: -46px;
  bottom: -33px;
  border: 22px solid rgba(255,255,255,.36);
}

.business-hero-card-front {
  left: 5px;
  bottom: 4px;
  width: 214px;
  height: 271px;
  padding: 25px 21px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 17%, rgba(113, 205, 255, .9), transparent 21%),
    linear-gradient(145deg, #15325f, #116ecc 49%, #6e4bdf);
  transform: rotate(-7deg) translateZ(20px);
}

.business-hero-card-front::before {
  width: 155px;
  height: 155px;
  left: -82px;
  bottom: -66px;
  border: 28px solid rgba(255,255,255,.14);
}

.business-hero-card i {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .13em;
}

.business-hero-card strong {
  position: relative;
  z-index: 1;
  font-size: 25px;
  line-height: .91;
  letter-spacing: -.05em;
}

.business-hero-card small {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .13em;
}

.business-hero-card-media-wrap {
  padding: 0;
  background: #0a0c10;
}

.business-hero-card-media-wrap::before,
.business-hero-card-media-wrap::after {
  display: none;
}

.business-hero-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.business-hero-spark {
  position: absolute;
  border: 1px solid rgba(114, 189, 255, .7);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(22,140,255,.32);
}

.business-hero-spark-a { width: 18px; height: 18px; left: -20px; top: 28px; }
.business-hero-spark-b { width: 9px; height: 9px; right: -18px; bottom: 44px; }

.business-mode-section {
  margin-top: 24px;
}

.business-mode-tabs {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--business-line);
  border-radius: 14px;
  background: rgba(11, 13, 17, .88);
  box-shadow: 0 15px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.025);
}

.business-mode-tab {
  min-width: 0;
  min-height: 74px;
  padding: 12px 17px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  color: #a1a7b1;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.business-mode-tab > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #7c828c;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: #15181d;
}

.business-mode-tab .icon { width: 18px; height: 18px; }
.business-mode-tab strong { align-self: end; color: inherit; font-size: 12px; }
.business-mode-tab small { align-self: start; margin-top: 3px; color: #717783; font-size: 9px; }

.business-mode-tab:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
}

.business-mode-tab.is-active {
  color: #fff;
  border-color: rgba(77, 166, 255, .42);
  background: linear-gradient(145deg, rgba(36, 106, 177, .28), rgba(13, 32, 57, .52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.22);
}

.business-mode-tab.is-active > span {
  color: #b3dcff;
  border-color: rgba(86, 177, 255, .4);
  background: linear-gradient(145deg, #174b80, #0c2748);
  box-shadow: 0 0 18px rgba(22,140,255,.18);
}

.business-advertising-workbench {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(390px, .72fr);
  gap: 24px;
  align-items: start;
}

.business-advertising-workbench.is-video-mode .business-composer-wrap {
  grid-column: 1;
  grid-row: 1;
  position: static;
}

.business-video-showcase {
  min-width: 0;
  padding: 15px 24px 22px;
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 92px;
  overflow: hidden;
  border: 1px solid var(--business-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(36, 137, 225, .16), transparent 42%),
    linear-gradient(155deg, rgba(18, 20, 25, .96), rgba(7, 9, 12, .98));
  box-shadow: 0 24px 62px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.03);
}

.business-video-showcase-heading {
  text-align: center;
}

.business-video-showcase-heading > span {
  color: #65b3f7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.business-video-showcase-heading h2 {
  margin: 7px 0 0;
  color: #f2f4f7;
  font-size: 20px;
  line-height: 1.12;
}

.business-video-showcase-heading p {
  max-width: 320px;
  margin: 8px auto 0;
  color: #858c97;
  font-size: 9px;
  line-height: 1.55;
}

.business-demo-phone {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 584 / 1160;
  margin: 8px auto 2px;
  overflow: hidden;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.48));
}

.business-demo-phone-screen {
  position: absolute;
  z-index: 1;
  top: 3.7%;
  left: 7.55%;
  width: 85.1%;
  height: 92.75%;
  overflow: hidden;
  border-radius: 10.5% / 5%;
  background: #050608;
}

.business-demo-video-track {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.business-demo-video-slide {
  width: 100%;
  height: 100%;
}

.business-demo-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #050608;
}

.business-demo-phone-frame {
  position: absolute;
  z-index: 2;
  top: -4.15%;
  left: -57.35%;
  width: 214.75%;
  height: auto;
  display: block;
  pointer-events: none;
}

.business-demo-pagination {
  margin-top: 2px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.business-demo-pagination span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #3a424d;
  transition: width 220ms ease, background-color 220ms ease;
}

.business-demo-pagination span.is-active {
  width: 16px;
  background: #55acf6;
}

.business-template-library,
.business-composer {
  border: 1px solid var(--business-line);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(18, 20, 25, .94), rgba(9, 11, 14, .96));
  box-shadow: 0 24px 62px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.025);
}

.business-template-library {
  min-width: 0;
  padding: 25px;
}

.business-library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.business-library-heading > div > span,
.business-composer-heading > div > span {
  display: block;
  margin-bottom: 7px;
  color: #65b3f7;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.business-library-heading h2,
.business-composer-heading h2 {
  margin: 0;
  color: #f8f9fb;
  font-size: 21px;
  letter-spacing: -.025em;
}

.business-library-heading p {
  margin: 6px 0 0;
  color: #7f8691;
  font-size: 10px;
  line-height: 1.45;
}

.business-library-heading > strong {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #8b929c;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  font-size: 8px;
}

.business-template-search-row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 128px 118px;
  gap: 8px;
}

.business-template-search,
.business-filter {
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  color: #8c929c;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  background: #0c0e12;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.business-template-search:focus-within,
.business-filter:focus-within {
  border-color: rgba(82, 174, 255, .58);
  box-shadow: 0 0 0 3px rgba(22,140,255,.1);
}

.business-template-search {
  padding: 0 8px 0 13px;
  gap: 9px;
}

.business-template-search > .icon { width: 16px; height: 16px; flex: 0 0 auto; }

.business-template-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: #f0f2f5;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}

.business-template-search input::placeholder { color: #626873; }
.business-template-search input::-webkit-search-cancel-button { display: none; }

.business-template-search button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #8f96a1;
  border: 0;
  border-radius: 50%;
  background: #1a1d23;
  cursor: pointer;
}

.business-template-search button .icon { width: 12px; height: 12px; }

.business-filter {
  position: relative;
  padding-left: 10px;
}

.business-filter > span {
  position: absolute;
  top: 5px;
  left: 11px;
  color: #626873;
  font-size: 6px;
  font-weight: 800;
  text-transform: uppercase;
}

.business-filter select {
  width: 100%;
  height: 100%;
  padding: 11px 27px 0 0;
  color: #d6d9de;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}

.business-filter select option,
.business-field select option {
  color: #edf0f4;
  background: #111419;
}

.business-template-grid {
  margin-top: 19px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px 12px;
}

.business-template-card {
  min-width: 0;
  padding: 0;
  color: #dfe2e7;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.business-template-art {
  position: relative;
  container-type: inline-size;
  width: 100%;
  min-height: 146px;
  aspect-ratio: var(--template-ratio, 4 / 5);
  overflow: hidden;
  display: block;
  color: var(--template-c, #fff);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: linear-gradient(145deg, var(--template-a, #1b1e25), var(--template-b, #293241));
  box-shadow: 0 13px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.business-template-reference-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.business-template-card:hover .business-template-art,
.business-template-card:focus-visible .business-template-art {
  transform: translateY(-4px);
  border-color: rgba(118, 193, 255, .62);
  box-shadow: 0 18px 34px rgba(0,0,0,.34), 0 0 0 3px rgba(22,140,255,.08);
}

.business-template-card:focus-visible { outline: none; }

.business-template-card.is-selected .business-template-art {
  border-color: #59adf8;
  box-shadow: 0 0 0 2px rgba(36, 147, 246, .28), 0 19px 40px rgba(0,0,0,.4);
}

.business-template-card-copy {
  padding: 9px 3px 0;
  display: block;
}

.business-template-card-copy strong {
  display: block;
  overflow: hidden;
  color: #e8eaee;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-template-card-copy small {
  display: block;
  margin-top: 3px;
  color: #707681;
  font-size: 7px;
}

.business-template-selected {
  position: absolute;
  z-index: 8;
  top: 7px;
  right: 7px;
  width: 23px;
  height: 23px;
  display: none;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 50%;
  background: #168cff;
  box-shadow: 0 5px 14px rgba(0,0,0,.3);
}

.business-template-selected .icon { width: 12px; height: 12px; }
.business-template-card.is-selected .business-template-selected { display: grid; }

.business-template-scene,
.business-template-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.business-template-visual { z-index: 2; }

.business-template-scene i,
.business-template-visual i {
  position: absolute;
  display: block;
}

.business-template-layout {
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 8.5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.6cqi;
  text-align: left;
}

.business-template-top {
  width: 100%;
  margin-bottom: 1.4cqi;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqi;
}

.business-template-logo {
  width: 8.5cqi;
  height: 8.5cqi;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 65%, transparent);
  border-radius: 50%;
  font-size: 4cqi;
  font-weight: 900;
  opacity: .85;
}

.business-template-chip {
  min-width: 0;
  padding: 1.5cqi 3.4cqi;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  font-size: 3.1cqi;
  font-weight: 800;
  letter-spacing: .16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.business-template-heading {
  max-width: 94%;
  font-size: 10.5cqi;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
}

.business-template-sub {
  max-width: 92%;
  font-size: 3.8cqi;
  font-weight: 600;
  line-height: 1.4;
  opacity: .8;
}

.business-template-cta {
  margin-top: auto;
  padding: 2.4cqi 5.2cqi;
  border-radius: 999px;
  background: var(--template-b);
  color: #fff;
  font-size: 3.5cqi;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 2cqi 5cqi rgba(0,0,0,.2);
}

.business-template-badge {
  position: absolute;
  z-index: 5;
  top: 27%;
  right: 7%;
  width: 21cqi;
  height: 21cqi;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffe14d;
  color: #17181c;
  font-size: 5.6cqi;
  font-weight: 900;
  letter-spacing: -.02em;
  transform: rotate(8deg);
  box-shadow: 0 3cqi 7cqi rgba(0,0,0,.24);
}

.business-template-badge::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px dashed rgba(0,0,0,.4);
  border-radius: 50%;
}

.business-template-video-ui {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.business-template-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14cqi;
  height: 14cqi;
  display: grid;
  place-items: center;
  color: #101317;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3cqi 8cqi rgba(0,0,0,.32);
  transform: translate(-50%, -50%);
}

.business-template-play .icon { width: 42%; height: 42%; margin-left: 5%; }

.business-template-duration {
  position: absolute;
  right: 6%;
  bottom: 8.5%;
  padding: 1.2cqi 3cqi;
  border-radius: 999px;
  background: rgba(9,10,13,.6);
  color: #fff;
  font-size: 3cqi;
  font-weight: 700;
}

.business-template-progress {
  position: absolute;
  right: 6%;
  bottom: 4.5%;
  left: 6%;
  height: 1.5cqi;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.3);
}

.business-template-progress i {
  position: absolute;
  inset: 0 62% 0 0;
  border-radius: inherit;
  background: #fff;
}

.business-template-art--blank {
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #bbc0c8;
  border-style: dashed;
  background: linear-gradient(145deg, #181a1f, #101216);
  text-align: center;
}

.business-template-art--blank::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 7px;
}

.business-template-blank-mark {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  color: #8bc9ff;
  border: 1px solid rgba(97,178,249,.32);
  border-radius: 50%;
  background: rgba(22,140,255,.09);
}

.business-template-blank-mark .icon { width: 17px; height: 17px; }
.business-template-art--blank > strong { font-size: 10px; }
.business-template-art--blank > small { margin-top: 5px; color: #686e77; font-size: 7px; }

/* Composición centrada (lujo, cine, belleza, spotlight) */
.business-template-art--noir .business-template-layout,
.business-template-art--premium .business-template-layout,
.business-template-art--spotlight .business-template-layout,
.business-template-art--cinema .business-template-layout,
.business-template-art--beauty .business-template-layout {
  align-items: center;
  text-align: center;
}

.business-template-art--noir .business-template-top,
.business-template-art--premium .business-template-top,
.business-template-art--spotlight .business-template-top,
.business-template-art--cinema .business-template-top,
.business-template-art--beauty .business-template-top { justify-content: center; }

.business-template-art--noir .business-template-logo,
.business-template-art--premium .business-template-logo,
.business-template-art--spotlight .business-template-logo,
.business-template-art--cinema .business-template-logo,
.business-template-art--beauty .business-template-logo { display: none; }

.business-template-art--noir .business-template-chip,
.business-template-art--premium .business-template-chip,
.business-template-art--spotlight .business-template-chip,
.business-template-art--cinema .business-template-chip,
.business-template-art--beauty .business-template-chip {
  padding-inline: 0;
  border: 0;
  letter-spacing: .3em;
}

/* Oferta que impacta — sale bold con badge de descuento */
.business-template-art--impact { background: radial-gradient(circle at 88% -12%, rgba(255,255,255,.3), transparent 42%), linear-gradient(135deg, var(--template-a), var(--template-b) 68%, #8f1b4d 125%); }
.business-template-art--impact .business-template-scene i:nth-child(1) { width: 62%; aspect-ratio: 1; left: -22%; bottom: -24%; border: 2cqi solid rgba(255,255,255,.14); border-radius: 50%; }
.business-template-art--impact .business-template-scene i:nth-child(2) { inset: 0; opacity: .16; background: radial-gradient(rgba(255,255,255,.9) .5px, transparent 1.1px); background-size: 3.6cqi 3.6cqi; }
.business-template-art--impact .business-template-heading { max-width: 78%; font-size: 15.5cqi; font-style: italic; letter-spacing: -.05em; text-transform: uppercase; }
.business-template-art--impact .business-template-chip { border: 0; background: #fff; color: #d81f4d; }
.business-template-art--impact .business-template-cta { background: #17181c; }
.business-template-art--impact .business-template-badge { top: 44%; }

/* Evento contemporáneo — editorial sobre papel */
.business-template-art--grid { color: var(--template-c); background: var(--template-a); }
.business-template-art--grid .business-template-scene i:nth-child(1) { inset: 4.5%; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.business-template-art--grid .business-template-scene i:nth-child(2) { top: 25%; right: 8.5%; left: 8.5%; height: 1px; background: currentColor; opacity: .3; }
.business-template-art--grid .business-template-visual i { right: 9%; bottom: 9%; width: 42%; height: 44%; border-radius: 999px 999px 0 0; background: linear-gradient(165deg, #6d8dff, var(--template-b) 55%, #101c56); }
.business-template-art--grid .business-template-heading { max-width: 72%; font-family: Georgia, 'Times New Roman', serif; font-size: 11.5cqi; font-weight: 600; letter-spacing: -.02em; }
.business-template-art--grid .business-template-chip { padding: 0; border: 0; border-radius: 0; color: var(--template-b); }
.business-template-art--grid .business-template-cta { padding: 0 0 .6cqi; border-radius: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--template-b); box-shadow: none; }
.business-template-art--grid .business-template-cta::after { content: " →"; }

/* Lanzamiento nocturno y colección premium — lujo serif con marco dorado */
.business-template-art--noir,
.business-template-art--premium { color: var(--template-c); background: radial-gradient(85% 55% at 50% 0%, color-mix(in srgb, var(--template-b) 26%, transparent), transparent 62%), var(--template-a); }
.business-template-art--noir .business-template-scene i:nth-child(1),
.business-template-art--premium .business-template-scene i:nth-child(1) { inset: 4.5%; border: 1px solid color-mix(in srgb, var(--template-b) 55%, transparent); }
.business-template-art--noir .business-template-scene i:nth-child(2),
.business-template-art--premium .business-template-scene i:nth-child(2) { left: 50%; bottom: 13%; width: 56%; height: 8%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--template-b) 45%, transparent), transparent); }
.business-template-art--noir .business-template-visual i { left: 50%; bottom: 16%; width: 15%; height: 26%; transform: translateX(-50%); border-radius: 3cqi 3cqi 1.2cqi 1.2cqi; background: linear-gradient(#151009 0 12%, transparent 12%), linear-gradient(160deg, #ecd39b, #6d5124); box-shadow: 0 5cqi 9cqi rgba(0,0,0,.55); }
.business-template-art--premium .business-template-visual i { left: 50%; bottom: 16%; width: 30%; height: 24%; transform: translateX(-50%); border-radius: 2.5cqi; background: linear-gradient(160deg, #f4ecdc, #c3a26b); box-shadow: 0 5cqi 9cqi rgba(0,0,0,.55); }
.business-template-art--noir .business-template-heading,
.business-template-art--premium .business-template-heading { font-family: Georgia, 'Times New Roman', serif; font-size: 10cqi; font-weight: 500; letter-spacing: .01em; }
.business-template-art--noir .business-template-chip,
.business-template-art--premium .business-template-chip { color: var(--template-b); }
.business-template-art--noir .business-template-cta,
.business-template-art--premium .business-template-cta { padding: 0 0 .6cqi; border-radius: 0; border-bottom: 1px solid var(--template-b); background: transparent; color: var(--template-b); font-size: 3cqi; letter-spacing: .18em; text-transform: uppercase; box-shadow: none; }

/* Servicio esencial — minimal B2B con gráfico de barras */
.business-template-art--clean { color: var(--template-c); background: var(--template-a); }
.business-template-art--clean .business-template-scene i:nth-child(1) { right: 27%; bottom: 12%; width: 7cqi; height: 12%; border-radius: 1.6cqi; background: color-mix(in srgb, var(--template-b) 25%, #fff); }
.business-template-art--clean .business-template-scene i:nth-child(2) { right: 18%; bottom: 12%; width: 7cqi; height: 18%; border-radius: 1.6cqi; background: color-mix(in srgb, var(--template-b) 55%, #fff); }
.business-template-art--clean .business-template-scene i:nth-child(3) { right: 9%; bottom: 12%; width: 7cqi; height: 26%; border-radius: 1.6cqi; background: var(--template-b); }
.business-template-art--clean .business-template-heading { font-size: 11cqi; font-weight: 850; letter-spacing: -.045em; }
.business-template-art--clean .business-template-heading::after { content: ""; display: block; width: 18cqi; height: 1.6cqi; margin-top: 2.6cqi; border-radius: 999px; background: var(--template-b); }
.business-template-art--clean .business-template-chip { color: var(--template-b); }

/* Comunidad viva — bloques de color editoriales */
.business-template-art--tiles { color: #22343c; background: var(--template-a); }
.business-template-art--tiles .business-template-scene i:nth-child(1) { top: 0; right: 0; width: 40%; height: 55%; border-radius: 0 0 0 32%; background: var(--template-b); }
.business-template-art--tiles .business-template-scene i:nth-child(2) { right: 0; bottom: 0; width: 40%; height: 45%; border-radius: 58% 0 0 0; background: #ffd23f; }
.business-template-art--tiles .business-template-scene i:nth-child(3) { top: 44%; right: 28%; width: 15cqi; height: 15cqi; border: 2px solid #fff; border-radius: 50%; background: var(--template-c); box-shadow: 0 2cqi 5cqi rgba(0,0,0,.18); }
.business-template-art--tiles .business-template-layout { padding-right: 45%; }
.business-template-art--tiles .business-template-heading { font-size: 10cqi; }
.business-template-art--tiles .business-template-cta { background: #22343c; }

/* Marca consciente y bienestar — colinas orgánicas */
.business-template-art--organic { color: var(--template-c); background: linear-gradient(170deg, var(--template-a), var(--template-b) 130%); }
.business-template-art--wellness { color: var(--template-c); background: var(--template-a); }
.business-template-art--organic .business-template-scene i:nth-child(1),
.business-template-art--wellness .business-template-scene i:nth-child(1) { left: -14%; right: -14%; bottom: -30%; height: 55%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.business-template-art--organic .business-template-scene i:nth-child(2),
.business-template-art--wellness .business-template-scene i:nth-child(2) { left: -30%; right: 10%; bottom: -34%; height: 52%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.business-template-art--organic .business-template-scene i:nth-child(1) { background: color-mix(in srgb, var(--template-c) 14%, transparent); }
.business-template-art--organic .business-template-scene i:nth-child(2) { background: color-mix(in srgb, var(--template-c) 9%, transparent); }
.business-template-art--wellness .business-template-scene i:nth-child(1) { background: color-mix(in srgb, var(--template-b) 32%, transparent); }
.business-template-art--wellness .business-template-scene i:nth-child(2) { background: color-mix(in srgb, var(--template-b) 20%, transparent); }
.business-template-art--organic .business-template-scene i:nth-child(3),
.business-template-art--wellness .business-template-scene i:nth-child(3) { top: 10%; right: 9%; width: 9cqi; height: 9cqi; border: 1px solid currentColor; border-radius: 50%; opacity: .55; }
.business-template-art--organic .business-template-heading,
.business-template-art--wellness .business-template-heading { font-size: 10.5cqi; font-weight: 800; letter-spacing: -.02em; }
.business-template-art--organic .business-template-cta { background: var(--template-c); color: #24473a; }
.business-template-art--wellness .business-template-cta { background: var(--template-b); }

/* Revelado de producto — spotlight escénico */
.business-template-art--spotlight { color: var(--template-c); background: radial-gradient(75% 50% at 50% 0%, color-mix(in srgb, var(--template-b) 40%, transparent), transparent 70%), var(--template-a); }
.business-template-art--spotlight .business-template-scene i:nth-child(1) { left: 50%; top: 0; width: 74%; height: 80%; transform: translateX(-50%); background: linear-gradient(180deg, color-mix(in srgb, var(--template-b) 34%, transparent), transparent 88%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.business-template-art--spotlight .business-template-scene i:nth-child(2) { left: 50%; bottom: 6.5%; width: 56%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--template-b) 55%, transparent), transparent); }
.business-template-art--spotlight .business-template-visual i { left: 50%; bottom: 11%; width: 22%; height: 20%; transform: translateX(-50%); border-radius: 2.6cqi; background: linear-gradient(155deg, #d9ccff, #58449c 70%, #2c2352); box-shadow: 0 4cqi 9cqi rgba(0,0,0,.55), 0 0 9cqi color-mix(in srgb, var(--template-b) 45%, transparent); }
.business-template-art--spotlight .business-template-heading { font-size: 9cqi; }

/* Oferta en movimiento — energía diagonal */
.business-template-art--kinetic { background: linear-gradient(120deg, var(--template-a), var(--template-b)); }
.business-template-art--kinetic .business-template-scene i:nth-child(1) { inset: -25%; background: repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 1.6cqi, transparent 1.6cqi 11cqi); }
.business-template-art--kinetic .business-template-scene i:nth-child(2) { inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(38,6,52,.4)); }
.business-template-art--kinetic .business-template-heading { font-size: 13.5cqi; font-style: italic; letter-spacing: -.045em; text-transform: uppercase; transform: rotate(-3deg); transform-origin: left; }
.business-template-art--kinetic .business-template-chip { border: 0; background: #17181c; color: #fff; }

/* Historia de marca — cita serif con tira de foto */
.business-template-art--story { color: var(--template-c); background: linear-gradient(180deg, var(--template-a) 0 60%, var(--template-b) 60%); }
.business-template-art--story .business-template-visual i { left: 8.5%; right: 8.5%; bottom: 7.5%; height: 27%; border: 1.4cqi solid #fbf6ec; border-radius: 2cqi; background: linear-gradient(140deg, #c59a68, #7c5636 55%, #46311f); box-shadow: 0 3cqi 7cqi rgba(0,0,0,.3); }
.business-template-art--story .business-template-heading { max-width: 86%; font-family: Georgia, 'Times New Roman', serif; font-size: 9cqi; font-weight: 500; line-height: 1.12; }
.business-template-art--story .business-template-heading::before { content: "“"; display: block; margin-bottom: 1cqi; color: var(--template-b); font-size: 13cqi; line-height: .55; }
.business-template-art--story .business-template-chip { padding: 0; border: 0; letter-spacing: .28em; color: var(--template-b); }

/* Campaña panorámica — letterbox cinematográfico */
.business-template-art--cinema { min-height: 108px; color: var(--template-c); background: linear-gradient(180deg, #05060a 0 13%, transparent 13% 87%, #05060a 87%), linear-gradient(165deg, #232c3a, #0d1118 70%); }
.business-template-art--cinema .business-template-layout { padding: 16% 8.5%; justify-content: center; gap: 1.8cqi; }
.business-template-art--cinema .business-template-top { margin-bottom: .6cqi; }
.business-template-art--cinema .business-template-scene i:nth-child(1) { top: 70%; right: 14%; left: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
.business-template-art--cinema .business-template-heading { max-width: 84%; font-size: 4.4cqi; font-weight: 600; letter-spacing: .22em; line-height: 1.5; }
.business-template-art--cinema .business-template-chip { color: var(--template-b); font-size: 2.4cqi; }
.business-template-art--cinema .business-template-sub { font-size: 2.8cqi; }
.business-template-art--cinema .business-template-play { top: auto; left: 8.5%; bottom: 18%; width: 8.5cqi; height: 8.5cqi; transform: none; }
.business-template-art--cinema .business-template-duration { bottom: 18%; font-size: 2.6cqi; }
.business-template-art--cinema .business-template-progress { bottom: 5%; }

/* Social pop — sticker vibrante */
.business-template-art--pop { background: linear-gradient(140deg, var(--template-a), var(--template-b)); }
.business-template-art--pop .business-template-scene i:nth-child(1) { width: 150%; aspect-ratio: 1; left: -25%; top: -10%; border-radius: 50%; background: repeating-conic-gradient(from 10deg, rgba(255,255,255,.12) 0 9deg, transparent 9deg 20deg); }
.business-template-art--pop .business-template-scene i:nth-child(2) { top: 15%; right: 10%; width: 12cqi; height: 12cqi; background: #ffe14d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(-12deg); }
.business-template-art--pop .business-template-scene i:nth-child(3) { bottom: 20%; left: -8%; width: 30cqi; height: 30cqi; border: 1.6cqi solid rgba(255,255,255,.25); border-radius: 50%; }
.business-template-art--pop .business-template-heading { font-size: 11.5cqi; letter-spacing: -.03em; text-transform: uppercase; text-shadow: .9cqi .9cqi 0 rgba(23,24,28,.3); transform: rotate(-2deg); transform-origin: left; }
.business-template-art--pop .business-template-chip { border: 0; background: #ffe14d; color: #17181c; }

/* Producto protagonista — tarjeta de producto con precio */
.business-template-art--product { color: #fff; background: linear-gradient(180deg, var(--template-a) 0 62%, var(--template-c) 62%); }
.business-template-art--product .business-template-visual i { right: 8.5%; top: 30%; width: 37%; height: 46%; border-radius: 3cqi; background: linear-gradient(160deg, #ffffff, #e2e7ec); box-shadow: 0 4cqi 9cqi rgba(9,24,32,.35); }
.business-template-art--product .business-template-visual i::before { content: ""; position: absolute; inset: 18% 24%; border-radius: 2cqi; background: linear-gradient(165deg, var(--template-a), #063b47); }
.business-template-art--product .business-template-heading { max-width: 52%; }
.business-template-art--product .business-template-sub { max-width: 50%; }
.business-template-art--product .business-template-badge { top: 22%; right: 5.5%; background: var(--template-b); color: #fff; }
.business-template-art--product .business-template-badge::after { border-color: rgba(255,255,255,.5); }

/* Belleza editorial — arco de producto serif */
.business-template-art--beauty { color: var(--template-c); background: var(--template-a); }
.business-template-art--beauty .business-template-scene i:nth-child(1) { inset: 4.5%; border: 1px solid color-mix(in srgb, var(--template-b) 30%, transparent); }
.business-template-art--beauty .business-template-visual i { left: 50%; top: 24%; width: 38%; height: 44%; transform: translateX(-50%); border: 1.2cqi solid #fff; border-radius: 999px 999px 2.2cqi 2.2cqi; background: linear-gradient(170deg, #fff6ec, #dcab9e 70%, #b0766f); box-shadow: 0 3cqi 8cqi rgba(138,59,69,.24); }
.business-template-art--beauty .business-template-heading { margin-top: auto; font-family: Georgia, 'Times New Roman', serif; font-size: 8.5cqi; font-weight: 500; }
.business-template-art--beauty .business-template-chip { color: var(--template-b); }
.business-template-art--beauty .business-template-cta { margin-top: 0; padding: 0 0 .6cqi; border-radius: 0; border-bottom: 1px solid var(--template-b); background: transparent; color: var(--template-b); box-shadow: none; }

/* Tecnología precisa — anillo de producto sobre retícula */
.business-template-art--tech { color: var(--template-c); background: radial-gradient(55% 42% at 74% 60%, color-mix(in srgb, var(--template-b) 24%, transparent), transparent 72%), var(--template-a); }
.business-template-art--tech .business-template-scene i:nth-child(1) { inset: 0; opacity: .12; background-image: linear-gradient(rgba(148,206,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(148,206,255,.5) 1px, transparent 1px); background-size: 4.5cqi 4.5cqi; }
.business-template-art--tech .business-template-scene i:nth-child(2) { top: 38%; right: 8%; width: 36%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--template-b) 65%, transparent); border-radius: 50%; }
.business-template-art--tech .business-template-scene i:nth-child(3) { top: 33%; right: 3.5%; width: 45%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--template-b) 25%, transparent); border-radius: 50%; }
.business-template-art--tech .business-template-visual i { top: 47%; right: 16.5%; width: 19%; aspect-ratio: 1; border-radius: 24%; background: linear-gradient(150deg, #143050, #57bdff); box-shadow: 0 3cqi 7cqi rgba(0,0,0,.45), 0 0 6cqi color-mix(in srgb, var(--template-b) 40%, transparent); }
.business-template-art--tech .business-template-heading { max-width: 55%; }
.business-template-art--tech .business-template-sub { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 3cqi; letter-spacing: .08em; opacity: .7; }
.business-template-art--tech .business-template-chip { color: var(--template-b); }
.business-template-art--tech .business-template-cta { border: 1px solid var(--template-b); background: transparent; color: var(--template-b); box-shadow: none; }

/* Sabor irresistible — plato apetitoso */
.business-template-art--gourmet { color: var(--template-c); background: var(--template-a); }
.business-template-art--gourmet .business-template-scene i:nth-child(1) { inset: 0; opacity: .3; background: radial-gradient(color-mix(in srgb, var(--template-b) 60%, transparent) 1px, transparent 1.6px); background-size: 8cqi 8cqi; mask-image: linear-gradient(115deg, transparent 45%, #000); }
.business-template-art--gourmet .business-template-visual i { right: -7%; bottom: -9%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 46% 42%, #fff8e9 0 30%, #f2d9a6 30% 37%, var(--template-b) 37% 55%, #8f2b12 55% 62%, #ffffff 62% 72%, #f0e1c8 72%); box-shadow: -2cqi 2cqi 7cqi rgba(67,32,20,.28); }
.business-template-art--gourmet .business-template-heading { max-width: 60%; font-size: 10cqi; }
.business-template-art--gourmet .business-template-chip { color: var(--template-b); }

.business-template-empty {
  grid-column: 1 / -1;
  min-height: 250px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #777e88;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  text-align: center;
}

.business-template-empty .icon { width: 27px; height: 27px; margin-bottom: 12px; }
.business-template-empty strong { color: #cbd0d7; font-size: 12px; }
.business-template-empty span { margin-top: 6px; font-size: 9px; }

.business-composer-wrap {
  position: sticky;
  top: 92px;
  min-width: 0;
}

.business-composer {
  padding: 24px;
}

.business-composer-heading {
  padding-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.business-selected-template {
  min-width: 130px;
  max-width: 180px;
  padding: 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: #0c0e12;
}

.business-selected-template > i {
  width: 28px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(145deg, var(--selected-template-a), var(--selected-template-b));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.business-selected-template > i.has-reference-image {
  border: 1px solid rgba(255,255,255,.14);
}

.business-selected-template > span { min-width: 0; }
.business-selected-template strong,
.business-selected-template small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-selected-template strong { color: #d9dde3; font-size: 8px; }
.business-selected-template small { margin-top: 3px; color: #6f7580; font-size: 6px; }

.business-form-section {
  min-width: 0;
  margin: 0;
  padding: 21px 0;
  display: grid;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.business-form-section legend {
  width: 100%;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b9bec6;
  font-size: 9px;
  font-weight: 800;
}

.business-form-section legend span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #8ac8ff;
  border: 1px solid rgba(56,156,246,.3);
  border-radius: 50%;
  background: rgba(22,140,255,.08);
  font-size: 7px;
}

.business-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.business-field-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.business-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #888f99;
  font-size: 8px;
  font-weight: 700;
}

.business-field > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.business-field > span b { color: #55adfa; font-weight: 800; }
.business-field > span small { color: #5e6570; font-size: 7px; font-weight: 600; }

.business-field input,
.business-field textarea,
.business-field select {
  width: 100%;
  min-width: 0;
  color: #ebedf1;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  outline: 0;
  background: #0b0d11;
  font-size: 9px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.business-field input,
.business-field select { height: 39px; padding: 0 10px; }
.business-field textarea { min-height: 84px; padding: 10px; resize: vertical; line-height: 1.5; }
.business-field input::placeholder,
.business-field textarea::placeholder { color: #555b65; }

.business-field :is(input, textarea, select):focus {
  border-color: rgba(74, 168, 251, .65);
  background: #0d1117;
  box-shadow: 0 0 0 3px rgba(22,140,255,.09);
}

.business-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(122px, .65fr);
  gap: 10px;
}

.business-upload-block {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(8,10,13,.62);
}

.business-upload-heading {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #989fa9;
  font-size: 8px;
  font-weight: 750;
}

.business-upload-heading small { color: #616873; font-size: 7px; }

.business-upload-zone {
  min-height: 78px;
  padding: 11px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  color: #aeb4bd;
  border: 1px dashed rgba(105,180,246,.32);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(22,140,255,.055), rgba(255,255,255,.018));
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.business-upload-zone:hover { border-color: rgba(105,180,246,.62); background: rgba(22,140,255,.09); }
.business-upload-zone > span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; color: #72baff; border: 1px solid rgba(75,164,243,.28); border-radius: 8px; background: rgba(22,140,255,.08); }
.business-upload-zone .icon { width: 15px; height: 15px; }
.business-upload-zone strong { align-self: end; font-size: 8px; }
.business-upload-zone small { align-self: start; color: #646b76; font-size: 6px; }

.business-upload-previews {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.business-upload-preview,
.business-logo-zone > span {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: #111419;
}

.business-upload-preview { aspect-ratio: 1; }
.business-upload-preview img,
.business-logo-zone img { width: 100%; height: 100%; display: block; object-fit: cover; }

.business-upload-preview button,
.business-logo-zone button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(5,6,8,.8);
  cursor: pointer;
}

.business-upload-preview button .icon,
.business-logo-zone button .icon { width: 10px; height: 10px; }

.business-logo-zone {
  min-height: 119px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 8px;
  cursor: pointer;
}

.business-logo-zone > span { width: 100%; min-height: 80px; flex: 1; display: grid; place-items: center; }
.business-logo-zone > small { color: #5f6670; font-size: 6px; text-align: center; }

.business-logo-empty {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #666d77;
  font-size: 7px;
}

.business-logo-empty .icon { width: 18px; height: 18px; }

.business-form-status {
  min-height: 17px;
  margin: 12px 2px 7px;
  color: #80bff5;
  font-size: 8px;
  line-height: 1.45;
}

.business-form-status.is-error { color: #ff8797; }

.business-generate-button {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  color: #fff;
  border: 1px solid rgba(126,198,255,.52);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(56, 142, 229, .55), rgba(7, 50, 96, .68)),
    #0b376d;
  box-shadow: 0 11px 27px rgba(0, 91, 180, .22), inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 10px;
  font-weight: 820;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.business-generate-button:hover:not(:disabled) { filter: brightness(1.16); transform: translateY(-1px); box-shadow: 0 15px 32px rgba(0,91,180,.3), inset 0 1px 0 rgba(255,255,255,.22); }
.business-generate-button:disabled { opacity: .48; cursor: not-allowed; }
.business-generate-button .icon { width: 17px; height: 17px; }
.business-generate-arrow { justify-self: end; }

.business-progress {
  margin-top: 17px;
  padding: 14px;
  border: 1px solid rgba(63,158,244,.27);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(22,140,255,.09), rgba(12,14,18,.86));
}

.business-progress-heading {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.business-progress-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(113,190,255,.18);
  border-top-color: #6ab8fc;
  border-radius: 50%;
  animation: business-progress-spin .8s linear infinite;
}

@keyframes business-progress-spin { to { transform: rotate(360deg); } }
.business-progress-heading div { min-width: 0; }
.business-progress-heading strong,
.business-progress-heading small { display: block; }
.business-progress-heading strong { color: #dfeeff; font-size: 9px; }
.business-progress-heading small { margin-top: 3px; color: #7e8c9c; font-size: 7px; line-height: 1.4; }
.business-progress-heading b { color: #8bcaff; font-size: 10px; }
.business-progress-track { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.business-progress-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #168cff, #72c2ff, #9479ff); box-shadow: 0 0 10px rgba(54,164,255,.42); transition: width 350ms ease; }

.business-progress > button {
  margin: 10px 0 0 auto;
  padding: 0;
  display: block;
  color: #8895a4;
  border: 0;
  background: transparent;
  font-size: 7px;
  font-weight: 700;
  cursor: pointer;
}

.business-progress > button:hover { color: #fff; }

.business-result {
  margin-top: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(74,167,251,.31);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(22,140,255,.09), rgba(9,11,14,.9));
}

.business-result.is-error { border-color: rgba(255,92,112,.3); background: rgba(115,25,40,.1); }

.business-result-media {
  position: relative;
  width: 92px;
  height: 110px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  background: #080a0d;
}

.business-result-media img,
.business-result-media video { width: 100%; height: 100%; display: block; object-fit: contain; }
.business-result-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #5d7186; }
.business-result-placeholder .icon { width: 26px; height: 26px; }
.business-result-copy { min-width: 0; padding: 5px 2px 0; }
.business-result-copy > span { color: #69b6f8; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.business-result.is-error .business-result-copy > span { color: #ff8293; }
.business-result-copy h3 { margin: 5px 0 0; color: #eff2f6; font-size: 12px; }
.business-result-copy small { display: block; margin-top: 4px; color: #737b86; font-size: 7px; }
.business-result-copy p { margin: 8px 0 0; color: #929aa5; font-size: 8px; line-height: 1.5; }

.business-result-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 6px;
}

.business-result-actions button {
  min-width: 0;
  min-height: 35px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #b7bec7;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 7px;
  background: #15181d;
  font-size: 7px;
  font-weight: 750;
  cursor: pointer;
}

.business-result-actions button:first-child { color: #e7f4ff; border-color: rgba(69,161,244,.32); background: rgba(22,140,255,.13); }
.business-result-actions button:hover { color: #fff; border-color: rgba(117,190,255,.48); }
.business-result-actions .icon { width: 13px; height: 13px; }

.business-advertising.is-generating .business-template-library { opacity: .72; }

.business-advertising :is(button, input, textarea, select):focus-visible {
  outline: 2px solid rgba(104,185,255,.88);
  outline-offset: 2px;
}

@media (max-width: 1360px) {
  .business-advertising-inner { padding-right: 24px; padding-left: 24px; }
  .business-advertising-workbench { grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr); gap: 18px; }
  .business-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .business-field-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .business-advertising-hero-copy { width: min(650px, 68%); }
  .business-advertising-hero-art { right: 11px; width: 310px; opacity: .82; transform: scale(.9); transform-origin: right center; }
  .business-advertising-workbench { grid-template-columns: 1fr; }
  .business-composer-wrap { position: static; }
  .business-advertising-workbench.is-video-mode .business-composer-wrap,
  .business-video-showcase {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .business-template-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .business-template-art { min-height: 156px; }
}

@media (max-width: 820px) {
  .business-advertising-inner { padding: 24px 20px 54px; }
  .business-advertising-hero { min-height: 270px; padding: 35px 30px; }
  .business-advertising-hero-copy { width: 72%; }
  .business-advertising-hero h1 { font-size: clamp(37px, 8vw, 55px); }
  .business-advertising-hero-art { right: -65px; opacity: .45; }
  .business-mode-tab { min-height: 66px; padding: 10px; grid-template-columns: 34px minmax(0,1fr); column-gap: 8px; }
  .business-mode-tab > span { width: 34px; height: 34px; }
  .business-mode-tab strong { font-size: 10px; }
  .business-mode-tab small { font-size: 7px; }
  .business-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .business-video-showcase { padding: 14px 14px 18px; }
  .business-demo-phone { width: min(100%, 305px); }
}

@media (max-width: 620px) {
  .business-advertising { min-height: calc(100dvh - 60px); }
  .business-advertising-inner { padding: 16px 14px 42px; }
  .business-advertising-hero { min-height: 310px; padding: 28px 22px; align-items: flex-start; }
  .business-advertising-hero-copy { width: 100%; }
  .business-advertising-hero h1 { max-width: 460px; font-size: 42px; }
  .business-advertising-hero-copy > p { max-width: 430px; padding-right: 26px; font-size: 12px; }
  .business-advertising-promises { gap: 6px; }
  .business-advertising-promises span { font-size: 7px; }
  .business-advertising-hero-art { right: -115px; top: 95px; transform: scale(.65); opacity: .3; }
  .business-mode-tabs { grid-template-columns: 1fr; }
  .business-mode-tab { min-height: 58px; }
  .business-template-library,
  .business-composer { padding: 17px; border-radius: 13px; }
  .business-library-heading { align-items: flex-start; }
  .business-library-heading h2,
  .business-composer-heading h2 { font-size: 18px; }
  .business-template-search-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .business-template-search { grid-column: 1 / -1; }
  .business-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 9px; }
  .business-template-art { min-height: 145px; }
  .business-composer-heading { display: grid; }
  .business-selected-template { max-width: none; }
  .business-field-grid,
  .business-field-grid-three,
  .business-upload-grid { grid-template-columns: 1fr; }
  .business-logo-zone > span { min-height: 105px; }
  .business-result { grid-template-columns: 78px minmax(0,1fr); }
  .business-result-media { width: 78px; height: 96px; }
  .business-result-actions { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .business-advertising-hero h1 { font-size: 36px; }
  .business-template-grid { grid-template-columns: 1fr 1fr; }
  .business-template-art { min-height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .business-advertising *,
  .business-advertising *::before,
  .business-advertising *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}