/* Fuente redondeada y muy gruesa para los títulos "hielo 3D" (.ie-glossy-title
   / .ie-card h3) — Arial no tiene trazos curvos, así que ningún degradado o
   sombra puede lograr el aspecto "bubble letter" sin cambiar de tipografía.
   Alojada en el propio proyecto (assets/fonts/), no en Google Fonts, para no
   depender de terceros. Baloo 2, ExtraBold (800), solo subset latino
   (cubre español: ñ, á, é, í, ó, ú, ü están en U+0000-00FF). */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./assets/fonts/baloo2-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --black: #090909;
  --black-soft: #151515;
  --white: #ffffff;
  --paper: #f3f3f1;
  --line: #ddddda;
  --line-dark: #303030;
  --muted: #73736f;
  --muted-dark: #9a9a96;
  --error: #b42318;
  --radius: 6px;
  --header-height: 68px;
}

* {
  box-sizing: border-box;
}

/* Vídeos diferidos de la portada (carrusel, showcases, fondo de auth...):
   muestran un fotograma estático (`poster`) al instante mientras el vídeo
   real carga en segundo plano (ver dashboard.js), así con wifi lenta nunca
   queda un hueco en blanco. El fondo oscuro cubre el instante -mínimo- antes
   de que cargue incluso el propio poster. */
video[data-deferred-video],
video[data-deferred-carousel-video] {
  background-color: var(--black-soft);
}

html {
  min-width: 320px;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: Arial, "Helvetica Neue", sans-serif;
  color: var(--black);
  background: var(--paper);
  letter-spacing: 0;
}

button,
input {
  font: inherit;
  letter-spacing: 0;
}

button,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.topbar {
  position: relative;
  z-index: 20;
  height: var(--header-height);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--black);
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.brand-mark .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.55;
}

.brand-mark .site-logo,
.auth-brand-mark .site-logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  max-width: none;
  height: 100%;
  display: block;
  transform: translateX(-50%);
}

.brand-name {
  font-size: 18px;
  font-weight: 800;
}

.brand-name span {
  font-weight: 400;
  color: var(--muted);
}

.topbar-actions,
.preview-actions,
.result-actions {
  display: flex;
  align-items: center;
}

.topbar-actions {
  gap: 10px;
}

.engine-status {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
}

.engine-status span,
.draft-status span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--black);
}

.engine-status strong {
  font-weight: 600;
}

.engine-status.rendering span {
  animation: statusPulse 1s ease-in-out infinite;
}

.icon-button,
.dark-icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.icon-button:hover {
  color: var(--white);
  background: var(--black);
  border-color: var(--black);
}

.profile-button {
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: var(--black);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.profile-button img,
.profile-avatar img,
.sidebar-avatar img,
.mode-profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 50%;
  padding: 6px 8px;
  color: var(--white);
  background: var(--black);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.tooltip:hover::after,
.tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.workspace {
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(430px, 0.72fr) minmax(0, 1.28fr);
}

.creator {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  background: var(--white);
  border-right: 1px solid var(--line);
}

.creator-inner {
  min-width: 0;
  max-width: 100%;
  width: min(100%, 650px);
  padding: 36px clamp(34px, 4vw, 68px) 40px;
}

.title-row {
  min-height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
}

.section-kicker,
.preview-label {
  margin: 0 0 7px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--muted);
}

h1 {
  max-width: 100%;
  margin: 0;
  font-size: 48px;
  line-height: 0.98;
  font-weight: 800;
}

.draft-status {
  margin-top: 17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

form {
  border-top: 1px solid var(--black);
}

.workflow-step {
  min-width: 0;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.workflow-step legend {
  width: 100%;
  margin: 0 0 13px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.workflow-step legend span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.workflow-step.complete legend span {
  color: var(--black);
}

.upload-zone {
  min-height: 104px;
  padding: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px dashed #b9b9b5;
  border-radius: var(--radius);
  background: #fafaf9;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.upload-zone:hover,
.upload-zone.dragging {
  background: var(--paper);
  border-color: var(--black);
  box-shadow: inset 0 0 0 1px var(--black);
}

.upload-zone[hidden] {
  display: none;
}

.upload-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--black);
  border-radius: 50%;
}

.upload-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.upload-copy strong {
  font-size: 13px;
}

.upload-copy small {
  color: var(--muted);
  font-size: 10px;
}

.upload-action {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.portrait-file {
  min-height: 68px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 24px 36px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--black);
  border-radius: var(--radius);
}

.portrait-file[hidden] {
  display: none;
}

.portrait-file img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  filter: grayscale(1);
  border-radius: 3px;
}

.file-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.file-copy strong,
.file-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-copy strong {
  font-size: 12px;
}

.file-copy span {
  color: var(--muted);
  font-size: 10px;
}

.file-ready {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--black);
  border-radius: 50%;
}

.file-ready .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.portrait-file .icon-button {
  width: 32px;
  height: 32px;
}

.tiktok-preview {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #d1d1ce;
  border-radius: var(--radius);
  background: #fafaf9;
}

.tiktok-preview.hidden,
.tiktok-preview[hidden] {
  display: none;
}

.tiktok-preview.loading {
  border-color: #b9b9b5;
}

.tiktok-preview.error {
  border-color: var(--error);
}

.tiktok-preview-media {
  position: relative;
  width: 100%;
  height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  background: #161616;
  text-decoration: none;
}

.tiktok-preview-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tiktok-preview-media img[hidden] {
  display: none;
}

.tiktok-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #a9a9a5;
  font-size: 10px;
  font-weight: 700;
}

.tiktok-preview-placeholder .icon {
  width: 25px;
  height: 25px;
}

.tiktok-preview.loading .tiktok-preview-placeholder .icon {
  animation: previewPulse 1.1s ease-in-out infinite;
}

.tiktok-preview.has-cover .tiktok-preview-placeholder {
  display: none;
}

.tiktok-preview-badge {
  position: absolute;
  z-index: 2;
  left: 8px;
  top: 8px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  background: rgba(0, 0, 0, .72);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.tiktok-preview-play {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  color: var(--white);
  background: rgba(0, 0, 0, .68);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  transition: transform 150ms ease, background 150ms ease;
}

.tiktok-preview.has-cover .tiktok-preview-play {
  display: grid;
}

.tiktok-preview-media:hover .tiktok-preview-play,
.tiktok-preview-media:focus-visible .tiktok-preview-play {
  background: rgba(0, 0, 0, .85);
  transform: scale(1.06);
}

.tiktok-preview-play .icon {
  width: 17px;
  height: 17px;
  margin-left: 2px;
  fill: currentColor;
}

.tiktok-preview-badge .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}

.tiktok-preview-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px 12px;
}

.tiktok-preview-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.tiktok-preview-header span,
.tiktok-preview-title,
.tiktok-preview-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tiktok-preview strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.tiktok-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

@keyframes previewPulse {
  0%, 100% { opacity: .42; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1); }
}

.url-control {
  position: relative;
  height: 48px;
}

.url-control input {
  width: 100%;
  height: 48px;
  padding: 0 82px 0 43px;
  color: var(--black);
  background: var(--white);
  border: 1px solid #b9b9b5;
  border-radius: var(--radius);
  outline: none;
  font-size: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.url-control input::placeholder {
  color: #a0a09b;
}

.url-control input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.url-control.valid input {
  border-color: var(--black);
}

.url-control.invalid input {
  border-color: var(--error);
}

.url-icon {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 15px;
  color: var(--muted);
}

.input-status {
  position: absolute;
  z-index: 2;
  right: 49px;
  top: 14px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--black);
  border-radius: 50%;
}

.input-status[hidden] {
  display: none;
}

.input-status .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.paste-button {
  position: absolute;
  z-index: 2;
  right: 6px;
  top: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
}

.field-message {
  min-height: 14px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.field-message.error {
  color: var(--error);
}

.compact-step {
  padding-bottom: 20px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.setting-group {
  min-width: 0;
}

.setting-label,
.setting-heading output,
.range-labels {
  color: var(--muted);
  font-size: 10px;
}

.setting-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.segmented {
  height: 38px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.segmented label {
  min-width: 0;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  width: 100%;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.segmented input:checked + span {
  color: var(--black);
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--black);
  outline-offset: 1px;
}

.setting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-heading .setting-label {
  margin-bottom: 0;
}

.setting-heading output {
  color: var(--black);
  font-weight: 700;
}

input[type="range"] {
  --range-progress: 65%;
  width: 100%;
  height: 4px;
  margin: 13px 0 8px;
  appearance: none;
  border-radius: 999px;
  background: linear-gradient(to right, var(--black) 0 var(--range-progress), var(--line) var(--range-progress) 100%);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  appearance: none;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}

.consent-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.35;
}

.consent-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #9e9e99;
  border-radius: 3px;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.custom-checkbox .icon {
  width: 12px;
  height: 12px;
  color: var(--white);
  opacity: 0;
  stroke-width: 2.5;
}

.consent-row input:checked + .custom-checkbox {
  background: var(--black);
  border-color: var(--black);
}

.consent-row input:checked + .custom-checkbox .icon {
  opacity: 1;
}

.consent-row input:focus-visible + .custom-checkbox {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.consent-shield {
  color: var(--muted);
}

.action-row {
  padding-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.generate-button {
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  color: var(--white);
  background: var(--black);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.generate-button:not(:disabled):hover {
  color: var(--black);
  background: var(--white);
}

.generate-button:not(:disabled):active {
  transform: translateY(1px);
}

.generate-button:disabled {
  border-color: #c8c8c4;
  color: #8d8d89;
  background: #e3e3e0;
  cursor: not-allowed;
}

.generate-button .button-idle,
.generate-button .button-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.generate-button .button-processing {
  display: none;
}

.generate-button.processing .button-idle {
  display: none;
}

.generate-button.processing .button-processing {
  display: flex;
}

.generate-button.processing:disabled {
  color: var(--white);
  background: var(--black);
  border-color: var(--black);
  cursor: pointer;
}

.spinner {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 35 20;
  animation: spin 850ms linear infinite;
}

.estimate {
  min-width: 54px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.estimate span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.estimate strong {
  font-size: 11px;
}

.preview-panel {
  min-width: 0;
  min-height: calc(100vh - var(--header-height));
  padding: 24px clamp(24px, 3.2vw, 52px) 22px;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) 48px;
  color: var(--white);
  background: var(--black-soft);
}

.preview-toolbar,
.preview-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.preview-toolbar > div:first-child {
  min-width: 0;
}

.preview-toolbar .preview-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted-dark);
}

.preview-toolbar strong {
  max-width: 250px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.preview-actions {
  gap: 10px;
}

.dark-icon-button {
  width: 34px;
  height: 34px;
  color: var(--white);
  border-color: var(--line-dark);
  background: transparent;
}

.dark-icon-button:hover {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

.view-tabs {
  height: 32px;
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
}

.view-tabs[hidden] {
  display: none;
}

.view-tabs button {
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  color: var(--muted-dark);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

.view-tabs button.active {
  color: var(--black);
  background: var(--white);
}

.preview-stage {
  min-height: 0;
  padding: 14px 0 18px;
  display: grid;
  place-items: center;
}

.video-frame {
  position: relative;
  height: min(85vh, 900px);
  max-height: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #3a3a3a;
  border-radius: var(--radius);
  background: #202020;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}

.preview-image,
.demo-preview-video,
.result-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transform-origin: 50% 70%;
}

.demo-preview-video[hidden] {
  display: none;
}

/* En pantalla completa se conserva el encuadre completo del vídeo, sin
   recortarlo para llenar el monitor. */
.video-frame:fullscreen,
.video-frame:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.video-frame:fullscreen .preview-image,
.video-frame:fullscreen .demo-preview-video,
.video-frame:fullscreen .result-video,
.video-frame:-webkit-full-screen .preview-image,
.video-frame:-webkit-full-screen .demo-preview-video,
.video-frame:-webkit-full-screen .result-video {
  object-fit: contain;
}

/* El vídeo generado se muestra completo: contain evita que el marco 9:16
   recorte los bordes cuando la proporción no coincide exactamente. */
.result-video {
  object-fit: contain;
  background: #000;
}

.result-video[hidden] {
  display: none;
}

.video-frame.result-view .preview-image {
  animation: danceMotion 2.8s ease-in-out infinite;
}

.video-frame.paused .preview-image,
.video-frame.paused .motion-ghost,
.video-frame.paused .timeline span {
  animation-play-state: paused;
}

.motion-ghost {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  background-image: var(--portrait-image);
  background-position: center;
  background-size: cover;
  filter: grayscale(1) contrast(1.1);
  pointer-events: none;
}

.result-view .motion-ghost {
  opacity: 0.09;
}

.result-view .ghost-one {
  animation: ghostMotionOne 2.8s ease-in-out infinite;
}

.result-view .ghost-two {
  animation: ghostMotionTwo 2.8s ease-in-out infinite;
}

.frame-grid {
  position: absolute;
  z-index: 2;
  inset: 12px;
  opacity: 0.22;
  pointer-events: none;
}

.frame-grid::before,
.frame-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.frame-grid::after {
  inset: 33.333% 0;
  border-right: 0;
  border-left: 0;
}

.frame-grid i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--white);
  border-style: solid;
}

.frame-grid i:nth-child(1) { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.frame-grid i:nth-child(2) { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.frame-grid i:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.frame-grid i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

.sample-tag,
.result-badge {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 22px;
  padding: 6px 8px;
  color: var(--black);
  background: var(--white);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
}

.result-badge {
  display: flex;
  align-items: center;
  gap: 5px;
}

.result-badge[hidden] {
  display: none;
}

.result-badge .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.5;
}

.processing-layer {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(6, 6, 6, 0.88);
  backdrop-filter: blur(7px);
}

.processing-layer[hidden] {
  display: none;
}

.processing-content {
  width: 100%;
  text-align: center;
}

.processing-orbit {
  position: relative;
  width: 58px;
  height: 58px;
  margin: 0 auto 24px;
  border: 1px solid #555;
  border-radius: 50%;
  animation: spin 2.8s linear infinite;
}

.processing-orbit::before,
.processing-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid #555;
  border-radius: 50%;
}

.processing-orbit::before { inset: 8px; }
.processing-orbit::after { inset: 17px; background: var(--white); }
.processing-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.processing-orbit span:first-child { top: -3px; left: 25px; }
.processing-orbit span:last-child { right: 5px; bottom: 5px; }

.processing-content strong {
  display: block;
  font-size: 15px;
}

.processing-content p {
  min-height: 16px;
  margin: 8px 0 24px;
  color: var(--muted-dark);
  font-size: 10px;
}

.progress-track {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: #404040;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--white);
  transition: width 180ms linear;
}

.processing-content output {
  display: block;
  margin-top: 9px;
  color: var(--muted-dark);
  font-size: 10px;
  text-align: right;
}

.play-button {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--black);
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 150ms ease, transform 150ms ease;
}

.play-button[hidden] {
  display: none;
}

.video-frame:hover .play-button,
.video-frame.paused .play-button,
.play-button:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.play-button .play-icon {
  display: none;
  margin-left: 2px;
}

.video-frame.paused .play-button .pause-icon {
  display: none;
}

.video-frame.paused .play-button .play-icon {
  display: block;
}

.video-overlay {
  position: absolute;
  z-index: 5;
  right: 20px;
  bottom: 17px;
  left: 20px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.result-view .video-overlay {
  opacity: 1;
}

.timeline {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

.timeline span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--white);
}

.result-view .timeline span {
  animation: timeline 5s linear infinite;
}

.time-row {
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  color: var(--white);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.preview-footer {
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
}

.output-spec,
.privacy-note {
  display: flex;
  align-items: center;
  gap: 9px;
}

.output-spec span {
  color: var(--muted-dark);
  font-size: 8px;
  font-weight: 700;
}

.output-spec strong {
  font-size: 10px;
}

.privacy-note {
  color: var(--muted-dark);
  font-size: 9px;
}

.privacy-note .icon {
  width: 14px;
  height: 14px;
}

.result-actions {
  gap: 8px;
  margin-left: auto;
}

.result-actions[hidden] {
  display: none;
}

.secondary-action,
.light-action {
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  color: var(--white);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.light-action {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

.secondary-action .icon,
.light-action .icon {
  width: 14px;
  height: 14px;
}

.toast-region {
  position: fixed;
  z-index: 260;
  right: 22px;
  bottom: 76px;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  background: var(--black);
  border: 1px solid #343434;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  font-size: 11px;
  line-height: 1.4;
  animation: toastIn 180ms ease both;
}

.toast .icon {
  width: 16px;
  height: 16px;
}

button:focus-visible,
input:focus-visible,
label:has(input:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes statusPulse { 50% { opacity: 0.25; transform: scale(0.7); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes timeline { to { width: 100%; } }
@keyframes danceMotion {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0) rotate(0); }
  20% { transform: scale(1.08) translate3d(-2.5%, -1%, 0) rotate(-1.2deg); }
  45% { transform: scale(1.06) translate3d(2%, 0.7%, 0) rotate(1deg); }
  70% { transform: scale(1.09) translate3d(-1%, -1.3%, 0) rotate(-0.6deg); }
}
@keyframes ghostMotionOne {
  0%, 100% { transform: translateX(0) scale(1.05); opacity: 0; }
  35% { transform: translateX(-5%) scale(1.06); opacity: 0.11; }
  55% { opacity: 0; }
}
@keyframes ghostMotionTwo {
  0%, 45%, 100% { transform: translateX(0) scale(1.05); opacity: 0; }
  70% { transform: translateX(5%) scale(1.07); opacity: 0.09; }
  90% { opacity: 0; }
}

@media (max-height: 820px) and (min-width: 901px) {
  .creator-inner { padding-top: 25px; padding-bottom: 24px; }
  .title-row { min-height: 55px; padding-bottom: 17px; }
  h1 { font-size: 35px; }
  .workflow-step { padding: 15px 0; }
  .upload-zone { min-height: 82px; padding: 11px; }
  .compact-step { padding-bottom: 14px; }
  .consent-row { min-height: 43px; }
  .action-row { padding-top: 14px; }
  .generate-button { height: 45px; }
  .video-frame { height: min(80vh, 760px); }
}

@media (max-width: 900px) {
  :root { --header-height: 60px; }
  .topbar { padding: 0 18px; }
  .engine-status { display: none; }
  .workspace { display: flex; flex-direction: column; }
  .creator { width: 100%; order: 1; border-right: 0; }
  .creator-inner { width: 100%; padding: 28px max(20px, 5vw) 34px; }
  .preview-panel { order: 2; min-height: 720px; padding: 22px max(20px, 5vw); }
  .video-frame { height: min(70vh, 620px); }
}

@media (max-width: 540px) {
  .topbar { padding: 0 14px; }
  .brand-name { font-size: 13px; }
  .topbar-actions { gap: 7px; }
  .topbar-actions .icon-button { display: none; }
  .creator-inner { padding: 24px 16px 30px; }
  .title-row,
  form,
  .workflow-step,
  .upload-zone,
  .url-control,
  .settings-grid,
  .setting-group,
  .consent-row,
  .action-row { width: 100%; max-width: 100%; min-width: 0; }
  .title-row { padding-bottom: 20px; }
  h1 { font-size: 36px; }
  .draft-status { margin-top: 13px; }
  .workflow-step { padding: 20px 0; }
  .upload-zone { min-height: 96px; grid-template-columns: 42px minmax(0, 1fr); }
  .upload-action { display: none; }
  .upload-copy small { white-space: normal; }
  .settings-grid { grid-template-columns: 1fr; gap: 20px; }
  .action-row { grid-template-columns: minmax(0, 1fr); }
  .estimate { display: none; }
  .preview-panel { min-height: 680px; padding: 20px 16px 16px; grid-template-rows: 42px minmax(0, 1fr) auto; }
  .preview-toolbar strong { max-width: 125px; }
  .view-tabs button { padding: 0 7px; }
  .video-frame { width: min(100%, 320px); height: auto; max-height: none; }
  .preview-footer { min-height: 58px; flex-wrap: wrap; }
  .privacy-note { display: none; }
  .result-actions { width: 100%; order: 2; }
  .result-actions button { flex: 1; }
  .toast-region { right: 16px; bottom: 74px; }
}

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

/* vidreum.ai identity and authentication */
:root {
  --vid-cyan: #19d9ff;
  --vid-coral: #ff477e;
  --vid-orange: #ff9b3d;
  --vid-lime: #c9ff3d;
  --vid-violet: #7457ff;
  --vid-ink: #0b0b10;
  --vid-panel: #f7f7f9;
  --vid-line: #dedee4;
}

body {
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  background: var(--vid-ink);
}

.auth-view {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(440px, 0.82fr);
  overflow: hidden;
  color: var(--white);
  background: var(--vid-ink);
}

.auth-view[hidden],
.auth-form[hidden] {
  display: none;
}

.auth-visual {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #07070b;
}

.auth-art,
.auth-visual-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-art {
  z-index: -2;
  object-fit: cover;
  object-position: 56% center;
  transform: scale(1.03);
  animation: authArtReveal 1.1s cubic-bezier(.22, .74, .2, 1) both;
}

.auth-visual-shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 5, 9, .68) 0%, rgba(4, 5, 9, .05) 38%, rgba(4, 5, 9, .86) 100%),
    linear-gradient(90deg, rgba(4, 5, 9, .58) 0%, transparent 52%, rgba(4, 5, 9, .08) 100%);
}

.auth-brand,
.auth-mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 20px;
  line-height: 1;
  font-weight: 750;
}

.auth-brand {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 38px;
  color: var(--white);
  text-decoration: none;
}

.auth-brand > span:last-child > span,
.auth-mobile-brand > span:last-child > span {
  color: var(--vid-cyan);
}

.auth-brand-mark {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-brand-mark::after {
  display: none;
}

.auth-brand-mark .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.5;
}

.auth-visual-copy {
  position: absolute;
  z-index: 2;
  right: 38px;
  bottom: 38px;
  left: 38px;
}

.auth-edition {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 700;
}

.auth-edition::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--vid-cyan), var(--vid-coral), var(--vid-orange));
}

.auth-visual-copy h1 {
  max-width: 630px;
  margin: 0;
  color: var(--white);
  font-size: 62px;
  line-height: .95;
  font-weight: 750;
  text-shadow: 0 8px 32px rgba(0, 0, 0, .38);
}

.auth-specs {
  margin-top: 28px;
  padding-top: 17px;
  display: flex;
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.auth-specs span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: rgba(255, 255, 255, .58);
  font-size: 8px;
  font-weight: 700;
}

.auth-specs strong {
  color: var(--white);
  font-size: 11px;
}

.auth-panel {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  color: var(--vid-ink);
  background: var(--vid-panel);
}

.auth-panel::before {
  content: "";
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  width: min(45vw, 640px);
  height: 4px;
  background: linear-gradient(90deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange), var(--vid-lime));
}

.auth-back-button {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 20px;
  height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #555660;
  border: 1px solid #d1d2d8;
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.auth-back-button .icon {
  width: 14px;
  height: 14px;
}

.auth-back-button:hover,
.auth-back-button:focus-visible {
  color: #111218;
  border-color: #9b9ca5;
  background: #f1f1f4;
  outline: none;
}

.auth-panel-inner {
  width: min(100%, 480px);
  min-height: 100%;
  margin: 0 auto;
  padding: 46px 42px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-mobile-brand {
  display: none;
  color: var(--vid-ink);
}

.auth-heading {
  margin-bottom: 22px;
}

.auth-heading p {
  margin: 0 0 9px;
  color: #6f6f7a;
  font-size: 9px;
  font-weight: 800;
}

.auth-heading h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 750;
}

.auth-heading > span {
  display: block;
  margin-top: 8px;
  color: #71717c;
  font-size: 12px;
  line-height: 1.45;
}

.auth-tabs {
  height: 43px;
  margin-bottom: 22px;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid var(--vid-line);
  border-radius: 6px;
  background: #ededf1;
}

.auth-tab {
  min-width: 0;
  border: 0;
  border-radius: 4px;
  color: #747480;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-tab.active {
  color: var(--vid-ink);
  background: var(--white);
  box-shadow: 0 2px 9px rgba(11, 11, 16, .09);
}

.auth-form {
  display: grid;
  gap: 15px;
}

.auth-field {
  min-width: 0;
}

.auth-field > label,
.auth-label-row label {
  display: block;
  margin-bottom: 7px;
  color: #303039;
  font-size: 10px;
  font-weight: 700;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.text-action {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  color: #5e46d8;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.auth-input {
  position: relative;
  height: 47px;
}

.auth-input > .icon {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #7b7b86;
  pointer-events: none;
}

.auth-input input {
  width: 100%;
  height: 47px;
  padding: 0 45px 0 43px;
  color: var(--vid-ink);
  border: 1px solid #cacbd2;
  border-radius: 6px;
  outline: none;
  background: rgba(255, 255, 255, .84);
  font-size: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.auth-input input::placeholder {
  color: #a1a1aa;
}

.auth-input input:focus {
  border-color: var(--vid-violet);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(116, 87, 255, .12);
}

.auth-input input.is-invalid {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .09);
}

.password-toggle {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #757580;
  background: transparent;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--vid-ink);
  background: #ededf1;
}

.password-toggle .eye-hidden {
  display: none;
}

.password-toggle.showing .eye-visible {
  display: none;
}

.password-toggle.showing .eye-hidden {
  display: block;
}

.auth-form-options,
.remember-control,
.terms-control {
  display: flex;
  align-items: center;
}

.remember-control,
.terms-control {
  gap: 9px;
  color: #5f5f6a;
  font-size: 10px;
  line-height: 1.35;
  cursor: pointer;
}

.remember-control input,
.terms-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-checkbox {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: transparent;
  border: 1px solid #a9a9b1;
  border-radius: 3px;
  background: var(--white);
}

.auth-checkbox .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.8;
}

.remember-control input:checked + .auth-checkbox,
.terms-control input:checked + .auth-checkbox {
  color: var(--white);
  border-color: transparent;
  background: linear-gradient(135deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

.remember-control input:focus-visible + .auth-checkbox,
.terms-control input:focus-visible + .auth-checkbox {
  outline: 2px solid var(--vid-violet);
  outline-offset: 2px;
}

.password-strength {
  height: 3px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.password-strength span {
  border-radius: 999px;
  background: #d9d9df;
  transition: background 150ms ease;
}

.password-strength[data-score="1"] span:nth-child(-n+1) { background: #ef476f; }
.password-strength[data-score="2"] span:nth-child(-n+2) { background: #ff9b3d; }
.password-strength[data-score="3"] span:nth-child(-n+3) { background: #8fcf2b; }
.password-strength[data-score="4"] span { background: linear-gradient(90deg, #5edc62, var(--vid-cyan)); }

.auth-field-password small {
  display: block;
  margin-top: 6px;
  color: #85858f;
  font-size: 8px;
}

.auth-error {
  min-height: 14px;
  margin: -3px 0;
  color: #b42318;
  font-size: 10px;
  line-height: 1.35;
}

.auth-error.success {
  color: #287d3c;
}

.auth-submit {
  position: relative;
  height: 49px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  color: var(--white);
  border: 0;
  border-radius: 6px;
  background: linear-gradient(105deg, #16cfee 0%, var(--vid-violet) 34%, var(--vid-coral) 67%, var(--vid-orange) 100%);
  background-size: 170% 100%;
  box-shadow: 0 10px 24px rgba(116, 87, 255, .2);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: background-position 260ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.auth-submit:hover {
  background-position: 100% 0;
  box-shadow: 0 13px 28px rgba(255, 71, 126, .24);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit .icon {
  width: 17px;
  height: 17px;
}

.auth-submit:disabled {
  cursor: wait;
  opacity: .75;
}

.auth-spinner {
  position: absolute;
  top: 16px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 35 20;
  animation: spin 850ms linear infinite;
}

.auth-submit.loading > span,
.auth-submit.loading > .icon {
  opacity: 0;
}

.auth-submit.loading .auth-spinner {
  display: block;
}

.auth-divider {
  position: relative;
  height: 33px;
  margin-top: 11px;
  display: grid;
  place-items: center;
}

.auth-divider::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--vid-line);
}

.auth-divider span {
  position: relative;
  padding: 0 10px;
  color: #8b8b95;
  background: var(--vid-panel);
  font-size: 9px;
}

.google-button {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #34343c;
  border: 1px solid #c8c9d0;
  border-radius: 6px;
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.google-button:hover {
  border-color: #8d8e97;
  background: #f0f0f3;
}

.google-button:active {
  transform: translateY(1px);
}

.google-button:disabled {
  cursor: wait;
  opacity: .65;
}

.google-mark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  font-size: 11px;
  font-weight: 800;
}

.firebase-status {
  min-height: 28px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8b8b95;
  font-size: 8px;
}

/* No queremos mostrar el indicador de conexión con Firebase en las vistas
   de iniciar sesión/registrarse; se deja el nodo en el DOM (con el atributo
   `hidden`) porque firebase.js sigue leyendo/escribiendo en él para saber si
   la conexión funciona, solo que ya no se pinta en pantalla. La regla base
   de arriba (misma especificidad que [hidden]) ganaría por orden de cascada
   si no se refuerza aquí. */
.firebase-status[hidden] {
  display: none;
}

.firebase-status > .icon {
  width: 12px;
  height: 12px;
}

.firebase-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aaaab2;
  animation: statusPulse 1.2s ease-in-out infinite;
}

.firebase-status.connected .firebase-dot {
  background: #3fbd64;
  animation: none;
}

.firebase-status.error .firebase-dot {
  background: #d92d20;
  animation: none;
}

/* Logged-in studio */
.app-shell {
  color: var(--vid-ink);
  background: #f5f5f8;
}

.topbar {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: #e3e3e8;
  box-shadow: 0 1px 0 rgba(13, 13, 18, .02);
}

.brand-mark {
  position: relative;
  background: transparent;
  box-shadow: none;
}

.brand-name {
  font-size: 18px;
  font-weight: 750;
}

.brand-name span {
  color: #6650e4;
  font-weight: 750;
}

.engine-status span,
.draft-status span {
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-coral));
}

.profile-wrap {
  position: relative;
}

.profile-button {
  background: linear-gradient(135deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
  box-shadow: 0 5px 15px rgba(116, 87, 255, .2);
}

.profile-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 11px);
  right: 0;
  width: 260px;
  overflow: hidden;
  color: var(--vid-ink);
  border: 1px solid #dcdce2;
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 18px 46px rgba(10, 10, 15, .16);
}

.profile-menu[hidden] {
  display: none;
}

.profile-summary {
  padding: 15px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.profile-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  overflow: hidden;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral));
  font-size: 10px;
  font-weight: 800;
}

.profile-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-summary strong,
.profile-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-summary strong {
  font-size: 11px;
}

.profile-summary div span {
  color: #777781;
  font-size: 9px;
}

.profile-plan {
  margin: 0 15px 11px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e3e3e8;
  border-radius: 5px;
  background: linear-gradient(100deg, rgba(25, 217, 255, .08), rgba(255, 71, 126, .07), rgba(201, 255, 61, .08));
}

.profile-plan span {
  color: #81818b;
  font-size: 8px;
  font-weight: 700;
}

.profile-plan strong {
  font-size: 10px;
}

.profile-menu > button {
  width: 100%;
  height: 43px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #4f4f59;
  border: 0;
  border-top: 1px solid #e5e5e9;
  background: var(--white);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.profile-menu > button:hover {
  color: var(--vid-ink);
  background: #f2f2f5;
}

.profile-menu > button .icon {
  width: 15px;
  height: 15px;
}

/* Selector de idioma dentro del menú de perfil (marcado en las cuatro páginas
   con ese menú, comportamiento en profile-language.js). El submenú se abre
   hacia la izquierda: el menú de perfil ya está pegado al borde derecho de la
   pantalla, así que hacia la derecha no cabría. */
.profile-menu:has(.profile-language.is-open) {
  overflow: visible;
}

.profile-language {
  position: relative;
}

.profile-language-trigger {
  width: 100%;
  height: 43px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #4f4f59;
  border: 0;
  border-top: 1px solid #e5e5e9;
  background: var(--white);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.profile-language-trigger:hover,
.profile-language.is-open .profile-language-trigger {
  color: var(--vid-ink);
  background: #f2f2f5;
}

.profile-language-trigger .icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.profile-language-label {
  flex: 1;
  text-align: left;
}

.profile-language-current {
  color: #8b8b96;
  font-weight: 600;
}

.profile-language-caret {
  opacity: .55;
}

.profile-language-options {
  position: absolute;
  z-index: 61;
  top: -6px;
  right: calc(100% + 8px);
  min-width: 150px;
  padding: 5px;
  display: grid;
  gap: 2px;
  border: 1px solid #dcdce2;
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 18px 46px rgba(10, 10, 15, .16);
}

.profile-language-options[hidden] {
  display: none;
}

.profile-language-options button {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4f4f59;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.profile-language-options button span {
  flex: 1;
  text-align: left;
}

.profile-language-options button:hover {
  color: var(--vid-ink);
  background: #f2f2f5;
}

.profile-language-check {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0;
}

.profile-language-options button.is-selected .profile-language-check {
  opacity: 1;
}

/* En pantallas estrechas no caben los 260px del menú más el submenú al lado:
   ahí se despliega debajo de "Idioma", dentro del propio menú de perfil. */
@media (max-width: 520px) {
  .profile-language-options {
    position: static;
    min-width: 0;
    margin: 0 10px 8px;
    box-shadow: none;
  }
}

.creator {
  background: #fbfbfd;
  border-right-color: #e1e1e7;
}

.section-kicker {
  color: #674fe3;
}

.creator h1 {
  color: #111116;
}

.upload-zone {
  border: 1px solid transparent;
  background:
    linear-gradient(#fafafd, #fafafd) padding-box,
    linear-gradient(110deg, #bfc1cb, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange)) border-box;
  background-size: 100% 100%, 220% 100%;
}

.upload-zone:hover,
.upload-zone.dragging {
  border-color: transparent;
  background:
    linear-gradient(#f6f5fa, #f6f5fa) padding-box,
    linear-gradient(110deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange), var(--vid-lime)) border-box;
  background-size: 100% 100%, 160% 100%;
  box-shadow: 0 9px 26px rgba(116, 87, 255, .1);
}

.upload-icon {
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-violet) 45%, var(--vid-coral));
  box-shadow: 0 7px 19px rgba(116, 87, 255, .23);
}

.portrait-file {
  border-color: #bebec7;
  box-shadow: inset 3px 0 0 var(--vid-coral);
}

.file-ready,
.input-status {
  background: linear-gradient(135deg, #37c96b, var(--vid-cyan));
}

.url-control input:focus {
  border-color: var(--vid-violet);
  box-shadow: 0 0 0 3px rgba(116, 87, 255, .1);
}

.url-control.valid input {
  border-color: #45bd6e;
}

.segmented input:checked + span {
  color: var(--white);
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
  box-shadow: 0 3px 9px rgba(116, 87, 255, .2);
}

input[type="range"] {
  background: linear-gradient(to right, var(--vid-cyan) 0%, var(--vid-violet) var(--range-progress), var(--line) var(--range-progress) 100%);
}

input[type="range"]::-webkit-slider-thumb {
  background: var(--vid-coral);
  box-shadow: 0 0 0 1px var(--vid-coral), 0 3px 10px rgba(255, 71, 126, .25);
}

input[type="range"]::-moz-range-thumb {
  background: var(--vid-coral);
  box-shadow: 0 0 0 1px var(--vid-coral);
}

.consent-row input:checked + .custom-checkbox {
  border-color: transparent;
  background: linear-gradient(135deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

.generate-button,
.generate-button.processing:disabled {
  border: 0;
  background: linear-gradient(105deg, #13cee9 0%, var(--vid-violet) 34%, var(--vid-coral) 68%, var(--vid-orange) 100%);
  background-size: 170% 100%;
  box-shadow: 0 9px 24px rgba(116, 87, 255, .2);
}

.generate-button:not(:disabled):hover {
  color: var(--white);
  border: 0;
  background-position: 100% 0;
}

.generate-button:disabled {
  border: 1px solid #d0d0d6;
  color: #9797a0;
  background: #e6e6e9;
  box-shadow: none;
}

.preview-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(25, 217, 255, .08) 0%, transparent 24%),
    linear-gradient(315deg, rgba(255, 71, 126, .09) 0%, transparent 28%),
    linear-gradient(120deg, #111119, #08080c 56%, #14100e);
}

.preview-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange), var(--vid-lime));
}

.preview-panel > * {
  position: relative;
  z-index: 1;
}

.video-frame {
  border: 1px solid transparent;
  background:
    linear-gradient(#202025, #202025) padding-box,
    linear-gradient(145deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange)) border-box;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .48), 0 0 30px rgba(116, 87, 255, .11);
}

.sample-tag,
.result-badge {
  color: var(--white);
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.processing-orbit::after {
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-coral), var(--vid-orange));
}

.processing-orbit span:first-child { background: var(--vid-cyan); }
.processing-orbit span:last-child { background: var(--vid-coral); }

.progress-track span,
.timeline span {
  background: linear-gradient(90deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

.light-action {
  color: var(--white);
  border: 0;
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

@keyframes authArtReveal {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1.03); }
}

@media (max-height: 780px) and (min-width: 801px) {
  .auth-panel-inner { padding-top: 58px; padding-bottom: 20px; }
  .auth-heading { margin-bottom: 15px; }
  .auth-heading h2 { font-size: 26px; }
  .auth-tabs { margin-bottom: 15px; }
  .auth-form { gap: 11px; }
  .auth-input,
  .auth-input input { height: 43px; }
  .auth-input > .icon { top: 12px; }
  .password-toggle { top: 4px; }
  .auth-submit { height: 45px; }
  .auth-divider { height: 27px; margin-top: 7px; }
  .google-button { height: 41px; }
  .firebase-status { margin-top: 7px; }
  .auth-visual-copy h1 { font-size: 52px; }
}

@media (max-width: 800px) {
  .auth-view {
    display: block;
    min-height: 100dvh;
    overflow: auto;
    background: var(--vid-panel);
  }

  .auth-view[hidden] { display: none; }
  .auth-visual { min-height: 205px; height: 205px; }
  .auth-art { object-position: 55% 54%; }
  .auth-brand { top: 19px; left: 20px; }
  .auth-visual-copy { right: 20px; bottom: 17px; left: 20px; }
  .auth-edition,
  .auth-specs { display: none; }
  .auth-visual-copy h1 { font-size: 35px; line-height: 1; }
  .auth-panel { min-height: auto; max-height: none; overflow: visible; }
  .auth-panel::before { position: absolute; width: 100%; }
  .auth-back-button { top: 12px; left: 16px; }
  .auth-panel-inner { width: min(100%, 500px); min-height: auto; padding: 62px 24px 24px; }
  .auth-heading h2 { font-size: 27px; }
}

@media (max-width: 540px) {
  .auth-visual { min-height: 178px; height: 178px; }
  .auth-brand { top: 16px; left: 16px; font-size: 17px; }
  .auth-brand-mark { width: 38px; height: 38px; }
  .auth-visual-copy { right: 16px; bottom: 14px; left: 16px; }
  .auth-visual-copy h1 { font-size: 31px; }
  .auth-panel-inner { padding: 58px 16px 22px; }
  .auth-heading { margin-bottom: 19px; }
  .auth-heading > span { font-size: 11px; }
  .auth-input,
  .auth-input input { height: 46px; }
  .auth-submit { height: 48px; }
  .profile-menu { position: fixed; top: 59px; right: 10px; left: 10px; width: auto; }
}

/* Main dashboard */
.dashboard-view {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  color: #f7f7fb;
  background: #090a0f;
  transition: grid-template-columns 200ms ease;
}

.dashboard-view[hidden],
.dashboard-backdrop[hidden] {
  display: none;
}

/* Al volver del editor, la ruta ya conoce la vista de clips. Mantenemos un
   estado neutro hasta que el proyecto esté disponible, sin pintar Inicio. */
html.clipping-return-pending #dashboardView {
  display: none !important;
}

.clipping-return-boot {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  color: #edf5ff;
  background:
    radial-gradient(circle at 50% 35%, rgba(41, 150, 239, .18), transparent 31%),
    #08090d;
}

html.clipping-return-pending .clipping-return-boot {
  display: grid;
}

.clipping-return-boot-card {
  display: grid;
  justify-items: center;
  gap: 15px;
  text-align: center;
}

.clipping-return-boot-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: grayscale(1) sepia(.12) saturate(.35) brightness(2.3) drop-shadow(0 0 10px rgba(255, 245, 220, .42));
}

.clipping-return-boot-card strong {
  font-size: 14px;
  font-weight: 760;
}

.clipping-return-boot-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(219, 239, 255, .2);
  border-top-color: #83ceff;
  border-radius: 50%;
  animation: clipping-return-spin .8s linear infinite;
}

@keyframes clipping-return-spin {
  to { transform: rotate(360deg); }
}

/* Clipping studio */
.clipping-view {
  width: 100%;
  min-height: calc(100vh - 78px);
  min-height: calc(100dvh - 78px);
  color: #f5f7fb;
  background:
    radial-gradient(circle at 78% 9%, rgba(25, 217, 255, .11), transparent 25%),
    radial-gradient(circle at 18% 85%, rgba(116, 87, 255, .12), transparent 32%),
    #090a0f;
}

.clipping-view[hidden] { display: none; }

.clipping-main { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 90px; }

.clipping-hero {
  margin-bottom: 38px;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 52px);
}
.clipping-hero-copy { min-width: 0; }
.clipping-hero p { margin: 0 0 11px; color: #70c9ff; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.clipping-hero h1 { margin: 0; color: #fbfcff; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.045em; line-height: .98; }
.clipping-hero-copy > span { max-width: 610px; margin-top: 16px; display: block; color: #9ba5b2; font-size: 14px; line-height: 1.65; }
.clipping-hero-visual {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin: 0;
  justify-self: end;
  isolation: isolate;
}
.clipping-hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 8%;
  border-radius: 50%;
  background: rgba(37, 140, 255, .3);
  filter: blur(34px);
}
.clipping-hero-visual img {
  width: 100%;
  aspect-ratio: 1672 / 941;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(111, 183, 255, .32);
  border-radius: 18px;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .44), 0 0 24px rgba(22, 140, 255, .12);
}

.clipping-workspace { display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: 22px; align-items: start; }
.clipping-source-card,
.clipping-settings { border: 1px solid #2b3039; border-radius: 12px; background: rgba(18, 21, 28, .86); box-shadow: 0 22px 56px rgba(0, 0, 0, .22); }
.clipping-source-card { padding: 18px; }

.clipping-url-field { min-height: 60px; display: flex; align-items: center; gap: 11px; padding: 0 15px; border: 1px solid #333b47; border-radius: 8px; background: #0d1016; transition: border-color 150ms ease, box-shadow 150ms ease; }
.clipping-url-field:focus-within { border-color: #454d58; box-shadow: none; }
.clipping-url-field > span { color: #79b7eb; }
.clipping-url-field .icon { width: 18px; height: 18px; }
.clipping-url-field input { width: 100%; min-width: 0; color: #eef2f8; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; }
.clipping-url-field input::placeholder { color: #778291; }
.clipping-url-message { min-height: 18px; margin: 9px 2px 0; color: #778391; font-size: 10px; }
.clipping-url-message.error { color: #ff879d; }

.clipping-preview { margin-top: 18px; display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1fr); gap: 17px; align-items: center; padding-top: 18px; border-top: 1px solid #292f38; }
.clipping-preview-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #07090d; box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.clipping-preview-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.clipping-preview-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(0, 0, 0, .42)); }
.clipping-preview-media > span { position: absolute; z-index: 1; left: 10px; bottom: 9px; width: 28px; height: 28px; display: grid; place-items: center; color: #11141a; border-radius: 50%; background: #fff; }
.clipping-preview-media .icon { width: 13px; height: 13px; margin-left: 2px; }
.clipping-preview > div { min-width: 0; }
.clipping-preview small { color: #76c5f7; font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.clipping-preview strong { display: block; margin: 7px 0 11px; overflow: hidden; color: #f0f3f8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.clipping-preview > div > a { display: inline-flex; align-items: center; gap: 5px; color: #a6c9e8; font-size: 10px; text-decoration: none; }
.clipping-preview > div > a:hover { color: #fff; }
.clipping-preview > div > a .icon { width: 12px; height: 12px; }

.clipping-settings { padding: 20px; }
.clipping-settings-tabs { margin: -20px -20px 21px; padding: 0 20px; display: flex; gap: 22px; border-bottom: 1px solid #2c323b; }
.clipping-settings-tabs span { position: relative; padding: 16px 0 14px; color: #868f9b; font-size: 11px; font-weight: 700; }
.clipping-settings-tabs .active { color: #f2f5fa; }
.clipping-settings-tabs .active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, var(--vid-cyan), var(--vid-violet)); }
.clipping-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.clipping-settings label > span { margin-bottom: 7px; display: block; color: #aab3c0; font-size: 10px; font-weight: 700; }
.clipping-settings select,
.clipping-settings input[type="text"],
.clipping-moments textarea { width: 100%; color: #e9edf4; border: 1px solid #343c48; border-radius: 6px; outline: 0; background: #11151c; font: inherit; font-size: 11px; }
.clipping-settings select,
.clipping-settings input[type="text"] { height: 40px; padding: 0 10px; }
.clipping-settings select:focus,
.clipping-settings input[type="text"]:focus,
.clipping-moments textarea:focus { border-color: #454d58; box-shadow: none; }
.clipping-settings select:hover, .clipping-settings select:focus,
.clipping-settings input[type="text"]:hover, .clipping-settings input[type="text"]:focus { border-color: rgba(255,255,255,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 18px rgba(255,255,255,.15); }
.clipping-settings-field { margin-top: 17px; display: block; }
.clipping-settings-advanced { margin-top: 19px; padding: 15px; border: 1px solid #343c48; border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.clipping-settings-advanced summary { display: flex; flex-direction: column; gap: 2px; color: #edf3f9; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.clipping-settings-advanced summary::-webkit-details-marker { display: none; }
.clipping-settings-advanced summary small { color: #748396; font-size: 9px; font-weight: 600; }
.clipping-settings-advanced[open] summary { margin-bottom: 4px; }
.clipping-settings-advanced .clipping-settings-field:first-of-type,
.clipping-settings-advanced .clipping-consent:first-of-type { margin-top: 14px; }
.clipping-subtitles { margin: 19px 0 0; padding: 15px; border: 1px solid #343c48; border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.clipping-subtitles legend { padding: 0 5px; color: #edf3f9; font-size: 11px; font-weight: 800; }
.clipping-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.clipping-choice-row label { cursor: pointer; }
.clipping-choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.clipping-choice-row label > span { min-height: 46px; margin: 0; padding: 9px 11px; display: flex; flex-direction: column; justify-content: center; color: #aeb9c6; border: 1px solid #3d4755; border-radius: 7px; background: rgba(8,11,16,.7); transition: .18s ease; }
.clipping-choice-row small { margin-top: 3px; color: #748396; font-size: 8px; }

/* Resumen de una línea ("With Backdrop · Pop" + botón "Configurar") que
   sustituye a la cuadrícula completa de plantillas/animación para no alargar
   la pantalla del formulario de clipping; el botón abre .clipping-subtitle-modal
   con esa misma configuración ya existente sin cambiar ningún id/selector
   que use dashboard.js. */
.clipping-subtitle-summary { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #343c48; border-radius: 8px; background: rgba(8,11,16,.55); }
/* Texto plano solo para lectores de pantalla: el resumen visual real son las
   miniaturas clonadas de abajo, marcadas aria-hidden porque duplican
   controles del modal. */
.clipping-subtitle-summary-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.clipping-subtitle-summary-previews { min-width: 0; display: flex; align-items: stretch; gap: 8px; overflow: hidden; }
.clipping-subtitle-configure-btn { flex: none; padding: 7px 14px; color: #fff; border: 1px solid rgba(255,255,255,.48); border-radius: 999px; background: #168cff; box-shadow: 0 0 12px rgba(22,140,255,.4), inset 0 1px 0 rgba(255,255,255,.28); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.clipping-subtitle-configure-btn:hover, .clipping-subtitle-configure-btn:focus-visible { background: #3aa0ff; box-shadow: 0 0 16px rgba(22,140,255,.6), inset 0 1px 0 rgba(255,255,255,.34); transform: translateY(-1px); }

/* .clipping-subtitle-summary-preset/-effect reutilizan las clases
   .clipping-caption-templates/.clipping-word-effects (con las mismas reglas
   de tipografía, color y animación por preset) para que la miniatura clonada
   en dashboard.js se vea IDÉNTICA a su tarjeta dentro del modal — solo se
   anula aquí la cuadrícula/el marco del fieldset para que quepa una sola
   tarjeta pequeña en la fila resumen. */
.clipping-subtitle-summary-preset.clipping-caption-templates { display: inline-grid; grid-template-columns: minmax(0, 128px); gap: 0; }
.clipping-subtitle-summary-effect.clipping-word-effects { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
/* La tarjeta de plantilla NO se toca: su min-height:72px original (con el
   padding de siempre) ya reserva el espacio justo para el sample con su
   transform/escala propios de cada preset — reducirlo (como se hizo antes)
   recorta el texto por arriba porque el contenido ya no cabe y el span tiene
   overflow:hidden. En vez de eso, se estira la tarjeta de animación —cuyo
   contenido es texto simple, sin ese riesgo— a esa misma altura de 72px para
   que ambas encajen. Selector con dos clases a propósito: .clipping-word-effects
   label span ya fija min-height más abajo en este archivo con la misma
   especificidad "1 clase + N etiquetas", así que un empate se resolvería por
   orden de aparición y perdería esta anulación. */
.clipping-subtitle-summary-effect.clipping-word-effects label span { min-height: 72px; padding: 4px 6px; }
.clipping-subtitle-summary-effect.clipping-word-effects label small { display: none; }
.clipping-subtitle-summary-preset label, .clipping-subtitle-summary-effect label { pointer-events: none; }

.clipping-subtitle-modal { position: fixed; z-index: 101; inset: 0; display: grid; place-items: center; padding: 24px; }
.clipping-subtitle-modal[hidden] { display: none; }
.clipping-subtitle-modal-backdrop { position: absolute; inset: 0; background: rgba(4,5,9,.78); backdrop-filter: blur(6px); }
.clipping-subtitle-modal-card { position: relative; z-index: 1; width: min(720px, 100%); max-height: min(85vh, 780px); display: flex; flex-direction: column; color: var(--white); border: 1px solid #303743; border-radius: 12px; background: #101116; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.clipping-subtitle-modal-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #232a35; }
.clipping-subtitle-modal-header h2 { margin: 0; color: #fff; font-size: 15px; font-weight: 800; }
.clipping-subtitle-modal-close { display: grid; place-items: center; width: 30px; height: 30px; color: #aeb9c6; border: 1px solid #3d4755; border-radius: 7px; background: rgba(255,255,255,.04); cursor: pointer; transition: .15s ease; }
.clipping-subtitle-modal-close:hover, .clipping-subtitle-modal-close:focus-visible { color: #fff; border-color: #566171; background: rgba(255,255,255,.09); }
.clipping-subtitle-modal-close .icon { width: 15px; height: 15px; }
.clipping-subtitle-modal-card .clipping-subtitle-options { min-height: 0; overflow-y: auto; padding: 18px 20px 20px; }

@media (max-width: 640px) {
  .clipping-subtitle-summary { flex-wrap: wrap; }
  .clipping-subtitle-modal { padding: 0; }
  .clipping-subtitle-modal-card { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
}
.clipping-layouts { margin: 19px 0 0; padding: 15px; border: 1px solid #343c48; border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.clipping-layouts legend { padding: 0 5px; color: #edf3f9; font-size: 11px; font-weight: 800; }
.clipping-layout-options { display: flex; flex-wrap: wrap; gap: 8px; }
.clipping-layout-option { position: relative; cursor: pointer; }
.clipping-layout-option input { position: absolute; opacity: 0; pointer-events: none; }
.clipping-settings .clipping-layout-option > .clipping-layout-chip { margin: 0; min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; color: #d6dde7; border: 1px solid #3d4755; border-radius: 8px; background: rgba(8,11,16,.7); font-size: 11px; font-weight: 700; transition: .18s ease; }
.clipping-layout-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clipping-layout-option:hover .clipping-layout-chip { color: #fff; border-color: rgba(255,255,255,.6); }
.clipping-layout-option input:checked + .clipping-layout-chip { color: #11151c; border-color: #fff; background: #eef1f5; box-shadow: 0 0 18px rgba(255,255,255,.18); }
.clipping-layout-option input:focus-visible + .clipping-layout-chip { outline: 2px solid var(--vid-cyan, #4ea8ff); outline-offset: 2px; }
.clipping-layout-option input:disabled + .clipping-layout-chip { opacity: .38; cursor: not-allowed; }
.clipping-layout-note { margin-top: 10px; display: block; color: #748396; font-size: 9px; line-height: 1.45; }

/* Ejemplo 9:16 que aparece encima del diseño al pasar el ratón. */
.clipping-settings .clipping-layout-option > .clipping-layout-preview { margin: 0; --preview-width: 124px; position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 50%; width: var(--preview-width); aspect-ratio: 9 / 16; display: grid; overflow: hidden; border-radius: 10px; background: #0b0e13; box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); opacity: 0; visibility: hidden; transform: translate(-50%, 6px) scale(.96); transform-origin: 50% 100%; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; pointer-events: none; }
.clipping-settings .clipping-layout-option:hover > .clipping-layout-preview,
.clipping-settings .clipping-layout-option input:focus-visible ~ .clipping-layout-preview { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.clipping-layout-preview small { position: absolute; right: 6px; bottom: 6px; left: 6px; padding: 4px 5px; color: #fff; border-radius: 5px; background: rgba(8,10,14,.72); font-size: 8px; font-weight: 700; line-height: 1.25; text-align: center; }
.clipping-settings .clipping-layout-preview.is-split { grid-template-rows: 1fr 1fr; }
.clipping-settings .clipping-layout-preview.is-three { grid-template-rows: repeat(3, 1fr); }
.clipping-settings .clipping-layout-preview.is-four { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.clip-layout-shot { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #151a22; }
.clip-layout-shot + .clip-layout-shot { box-shadow: inset 0 1px 0 rgba(0,0,0,.35); }
.clipping-layout-preview.is-four .clip-layout-shot:nth-child(even) { box-shadow: inset 1px 0 0 rgba(0,0,0,.35); }
.clip-layout-fit-blur { position: absolute; inset: 0; overflow: hidden; }
.clip-layout-fit-frame { position: relative; align-self: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #151a22; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
/* Selectores de la configuración de clipping, estilo Vidreum Studio. */
.clipping-settings select.clip-picker-native { display: none; }
.clip-picker { position: relative; }
.clip-picker.is-open { z-index: 60; }
.clipping-settings .clip-picker-trigger { width: 100%; height: 42px; padding: 0 12px 0 10px; display: flex; align-items: center; gap: 10px; color: #e6ebf2; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; outline: 0; background: linear-gradient(180deg, rgba(27,33,43,.96), rgba(15,19,26,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.18); font: inherit; text-align: left; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.clipping-settings .clip-picker-trigger:hover,
.clipping-settings .clip-picker.is-open .clip-picker-trigger { color: #fff; border-color: rgba(106,174,255,.38); background: linear-gradient(180deg, rgba(36,58,88,.5), rgba(17,24,34,.98)); }
.clipping-settings .clip-picker-trigger:focus-visible { border-color: rgba(106,174,255,.55); box-shadow: 0 0 0 3px rgba(44,132,236,.18); }
.clipping-settings .clip-picker-trigger:disabled { opacity: .5; cursor: not-allowed; }
.clip-picker-trigger strong { min-width: 0; flex: 1; overflow: hidden; color: inherit; font-size: 11px; font-weight: 750; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.clip-picker-leading { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; color: #96c9ff; border: 1px solid rgba(150,201,255,.14); border-radius: 8px; background: rgba(58,111,172,.13); }
.clip-picker-icon { width: 14px; height: 14px; }
.clip-picker-aspect { display: grid; place-items: center; }
.clip-picker-aspect span { display: block; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; }
.clip-picker-aspect [data-aspect-symbol="1:1"] { width: 11px; height: 11px; }
.clip-picker-aspect [data-aspect-symbol="9:16"] { width: 8px; height: 14px; }
.clip-picker-aspect [data-aspect-symbol="16:9"] { width: 16px; height: 9px; }
.clip-picker-chevron { width: 10px; height: 10px; flex: 0 0 auto; color: #727c88; transform: rotate(90deg); transition: color 160ms ease, transform 180ms ease; }
.clip-picker.is-open .clip-picker-chevron { color: #b9d9ff; transform: rotate(-90deg); }
.clip-picker-menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; min-width: 210px; max-height: 320px; padding: 8px; overflow-y: auto; color: #e9edf3; border: 1px solid rgba(152,188,228,.16); border-radius: 14px; background: linear-gradient(155deg, rgba(23,29,38,.985), rgba(10,13,18,.995) 74%); box-shadow: 0 24px 58px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(0,0,0,.35); backdrop-filter: blur(24px) saturate(.9); transform-origin: 50% 0; scrollbar-width: thin; scrollbar-color: #3a4350 transparent; }
.clip-picker.opens-up .clip-picker-menu { top: auto; bottom: calc(100% + 8px); transform-origin: 50% 100%; }
.clip-picker-menu:not([hidden]) { animation: clip-picker-in 170ms cubic-bezier(.2,.75,.2,1) both; }
@keyframes clip-picker-in { from { opacity: 0; transform: translateY(-6px) scale(.975); } to { opacity: 1; transform: none; } }
.clip-picker.opens-up .clip-picker-menu:not([hidden]) { animation-name: clip-picker-in-up; }
@keyframes clip-picker-in-up { from { opacity: 0; transform: translateY(6px) scale(.975); } to { opacity: 1; transform: none; } }
.clipping-settings .clip-picker-title { margin: 4px 6px 8px; display: block; color: #707a87; font-size: 8px; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.clip-picker-options { display: grid; gap: 3px; }
.clipping-settings .clip-picker-option { width: 100%; min-height: 42px; margin: 0; padding: 6px 8px; display: flex; align-items: center; gap: 10px; color: #c6cdd6; border: 1px solid transparent; border-radius: 10px; outline: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.clipping-settings .clip-picker-option:hover,
.clipping-settings .clip-picker-option:focus-visible { color: #fff; border-color: rgba(109,168,235,.13); background: rgba(58,111,172,.13); }
.clipping-settings .clip-picker-option:active { transform: scale(.99); }
.clipping-settings .clip-picker-option:disabled { opacity: .4; cursor: not-allowed; }
.clipping-settings .clip-picker-option[aria-selected="true"] { color: #fff; border-color: rgba(69,145,235,.24); background: linear-gradient(105deg, rgba(38,105,185,.24), rgba(36,57,81,.16)); }
.clip-picker-option .clip-picker-leading { width: 30px; height: 30px; flex-basis: 30px; color: #aab5c1; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.03); }
.clip-picker-option[aria-selected="true"] .clip-picker-leading { color: #8ec5ff; border-color: rgba(142,197,255,.24); background: rgba(58,111,172,.16); }
.clip-picker-option strong { min-width: 0; flex: 1; overflow: hidden; font-size: 11px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.clip-picker-check { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; color: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(0,0,0,.18); }
.clip-picker-check .icon { width: 10px; height: 10px; }
.clip-picker-option[aria-selected="true"] .clip-picker-check { color: #f7fbff; border-color: #438fe7; background: #2876cb; box-shadow: 0 0 14px rgba(38,130,235,.38); }
.clip-layout-shot img,
.clip-layout-fit-blur img,
.clip-layout-fit-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.clip-layout-fit-blur img { filter: blur(9px) saturate(1.1); transform: scale(1.15); }

/* Prototipo en vivo del resultado, bajo el enlace del vídeo. */
.clipping-prototype { margin-top: 18px; padding-top: 18px; border-top: 1px solid #292f38; }
.clipping-prototype-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clipping-prototype-header div { display: grid; gap: 3px; }
.clipping-prototype-header small { color: #6f7b8a; font-size: 8px; font-weight: 820; letter-spacing: .14em; }
.clipping-prototype-header strong { color: #eef2f8; font-size: 13px; font-weight: 800; }
.clipping-prototype-live { padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; color: #9fd1ff; border: 1px solid rgba(106,174,255,.24); border-radius: 999px; background: rgba(44,103,169,.14); font-size: 9px; font-weight: 800; }
.clipping-prototype-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ea6ff; box-shadow: 0 0 10px #3ea6ff; animation: clipping-prototype-pulse 1.6s ease-in-out infinite; }
@keyframes clipping-prototype-pulse { 50% { opacity: .35; } }
.clipping-prototype-stage { position: relative; margin-top: 16px; min-height: 300px; padding: 22px 16px; display: grid; place-items: center; overflow: hidden; border: 1px solid #242a33; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(46,110,190,.2), transparent 62%), #0a0d12; }
.clipping-prototype-frame { --frame-width: 212px; position: relative; z-index: 2; width: var(--frame-width); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #05070a; box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14), 0 0 0 5px rgba(12,15,20,.9), 0 0 0 6px rgba(255,255,255,.07); transition: width .28s ease, aspect-ratio .28s ease; }
.clipping-prototype-frame[data-format="square"] { --frame-width: 300px; aspect-ratio: 1 / 1; }
.clipping-prototype-frame[data-format="horizontal"] { --frame-width: 100%; max-width: 440px; aspect-ratio: 16 / 9; border-radius: 12px; }
.clipping-prototype-stack { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; pointer-events: none; }
.clipping-prototype-stack span { position: absolute; width: 212px; aspect-ratio: 9 / 16; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(160deg, #161b24, #0c1016); transition: transform .28s ease, opacity .28s ease; }
.clipping-prototype-stack span:first-child { transform: translateX(-34px) rotate(-7deg) scale(.9); opacity: .55; }
.clipping-prototype-stack span:last-child { transform: translateX(34px) rotate(7deg) scale(.9); opacity: .55; }
.clipping-prototype-stack[data-format="square"] span { width: 280px; aspect-ratio: 1 / 1; }
.clipping-prototype-stack[data-format="horizontal"] { display: none; }
.clipping-prototype-media { position: absolute; inset: 0; display: grid; }
.clipping-prototype-media[data-layout="split"] { grid-template-rows: 1fr 1fr; }
.clipping-prototype-media[data-layout="three"] { grid-template-rows: repeat(3, 1fr); }
.clipping-prototype-media[data-layout="four"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.clipping-prototype-media .proto-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.clipping-prototype-media .proto-panel + .proto-panel { box-shadow: inset 0 1px 0 rgba(0,0,0,.45); }
.clipping-prototype-media[data-layout="four"] .proto-panel:nth-child(even) { box-shadow: inset 1px 0 0 rgba(0,0,0,.45); }
.clipping-prototype-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.clipping-prototype-media .proto-fit-blur { position: absolute; inset: -16px; }
.clipping-prototype-media .proto-fit-blur img { filter: blur(12px) brightness(.8); transform: scale(1.1); }
.clipping-prototype-media .proto-fit-frame { position: relative; align-self: center; width: 100%; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.clipping-prototype-frame[data-grade="cinematic"] .clipping-prototype-media { filter: contrast(1.12) saturate(.86) brightness(.96); }
.clipping-prototype-frame[data-grade="vibrant"] .clipping-prototype-media { filter: contrast(1.08) saturate(1.45); }
.clipping-prototype-frame[data-grade="warm"] .clipping-prototype-media { filter: saturate(1.12) sepia(.18); }
.clipping-prototype-frame[data-grade="cold"] .clipping-prototype-media { filter: saturate(.92) brightness(1.02); }
.clipping-prototype-frame[data-grade="mono"] .clipping-prototype-media { filter: grayscale(1) contrast(1.1); }
.clipping-prototype-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.clipping-prototype-frame[data-grade="cinematic"] .clipping-prototype-tint { opacity: 1; background: linear-gradient(180deg, rgba(0,40,60,.18), rgba(60,30,0,.12)); mix-blend-mode: soft-light; }
.clipping-prototype-frame[data-grade="warm"] .clipping-prototype-tint { opacity: 1; background: rgba(255,140,40,.16); mix-blend-mode: soft-light; }
.clipping-prototype-frame[data-grade="cold"] .clipping-prototype-tint { opacity: 1; background: rgba(60,140,255,.2); mix-blend-mode: soft-light; }
.clipping-prototype-watermark { position: absolute; z-index: 3; top: 9%; right: 8px; max-width: 70%; overflow: hidden; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; }
.clipping-prototype-caption { --caption-scale: 1; position: absolute; z-index: 3; right: 8px; left: 8px; bottom: 17%; display: flex; justify-content: center; pointer-events: none; transform: translateY(0); transition: bottom .25s ease, top .25s ease; }
.clipping-prototype-caption[data-position="center"] { bottom: auto; top: 50%; transform: translateY(-50%); }
.clipping-prototype-caption[data-position="top"] { bottom: auto; top: 16%; }
.clipping-prototype-caption[hidden] { display: none; }
.clipping-prototype-caption .clipping-caption-sample { width: auto; max-width: 100%; min-height: 0; gap: 0 .28em; font-size: calc(var(--caption-font-size, 12px) * 2.1 * var(--caption-scale)); }
.clipping-prototype-frame[data-format="horizontal"] .clipping-prototype-caption .clipping-caption-sample { font-size: calc(var(--caption-font-size, 12px) * 1.6 * var(--caption-scale)); }
.clipping-prototype-caption[data-treatment="box"] .clipping-caption-sample { padding-inline: 6px; background: rgba(7,9,13,.82); box-shadow: 0 0 0 2px rgba(7,9,13,.82); }
.clipping-prototype-caption[data-treatment="shadow"] .clipping-caption-sample { filter: drop-shadow(0 3px 2px rgba(0,0,0,.8)); }
.clipping-prototype-caption .clipping-caption-sample > .is-active { display: inline-block; }
.clipping-prototype-caption[data-effect="pop"] .is-active { animation: clipping-proto-pop .45s cubic-bezier(.2,1.6,.4,1) both; }
.clipping-prototype-caption[data-effect="bounce"] .is-active { animation: clipping-proto-bounce .5s ease both; }
.clipping-prototype-caption[data-effect="flash"] .is-active { animation: clipping-proto-flash .5s ease both; }
@keyframes clipping-proto-pop { from { transform: scale(.7); } to { transform: scale(1.08); } }
@keyframes clipping-proto-bounce { 40% { transform: translateY(-18%); } to { transform: translateY(0); } }
@keyframes clipping-proto-flash { from { filter: brightness(2.2); } to { filter: none; } }
.clipping-prototype-index { position: absolute; z-index: 3; top: 8px; left: 8px; padding: 3px 7px; color: #fff; border-radius: 999px; background: rgba(8,10,14,.62); font-size: 8px; font-weight: 800; }
.clipping-prototype-progress { position: absolute; z-index: 3; right: 8px; bottom: 7px; left: 8px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.22); }
.clipping-prototype-progress i { width: 0; height: 100%; display: block; border-radius: inherit; background: #fff; animation: clipping-proto-progress 6s linear infinite; }
@keyframes clipping-proto-progress { to { width: 100%; } }
.clipping-prototype-specs { margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.clipping-prototype-specs li { padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; color: #c9d3de; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(255,255,255,.035); font-size: 9px; font-weight: 750; }
.clipping-prototype-specs li b { color: #7e8a98; font-weight: 700; }
.clipping-prototype-note { margin: 10px 2px 0; color: #6f7b8a; font-size: 9px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .clipping-prototype-live i,
  .clipping-prototype-progress i,
  .clipping-prototype-caption .is-active { animation: none !important; }
}
.clipping-choice-row input:checked + span { color: #fff; border-color: #fff; background: rgba(255,255,255,.09); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 22px rgba(255,255,255,.2), inset 0 0 18px rgba(255,255,255,.06); }
.clipping-choice-row input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.clipping-subtitle-options { margin-top: 13px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.clipping-caption-templates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 7px; }
.clipping-caption-templates label { min-width: 0; cursor: pointer; }
.clipping-caption-templates input { position: absolute; opacity: 0; pointer-events: none; }
.clipping-caption-templates label > span { min-height: 72px; margin: 0; padding: 7px 5px 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; overflow: hidden; color: #fff; border: 1px solid transparent; border-radius: 8px; background: var(--caption-preview-background, #37393b); text-align: center; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.clipping-caption-sample { width: 100%; min-height: 38px; padding: 3px 2px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 0 3px; color: var(--caption-inactive, #fff); border-radius: 4px; background: var(--caption-sample-background, transparent); font-family: var(--caption-font, "Arial Black", sans-serif); font-size: var(--caption-font-size, 9px); font-style: var(--caption-font-style, normal); font-weight: var(--caption-weight, 900); letter-spacing: var(--caption-letter-spacing, 0); line-height: 1.02; text-transform: var(--caption-case, uppercase); text-shadow: var(--caption-shadow, 0 2px 0 #111); transform: var(--caption-transform, none); transform-origin: center; }
.clipping-caption-sample > span { color: inherit; }
.clipping-caption-sample > .is-active { color: var(--caption-active, #48ff69); }
.clipping-subtitle-options[data-treatment="box"] .clipping-caption-sample { width: auto; max-width: 96%; padding-inline: 6px; background: rgba(7,9,13,.82); box-shadow: 0 0 0 2px rgba(7,9,13,.82); }
.clipping-subtitle-options[data-treatment="shadow"] .clipping-caption-sample { filter: drop-shadow(0 3px 2px rgba(0,0,0,.8)); }
.clipping-caption-templates label > span > small { max-width: 100%; overflow: hidden; color: var(--caption-label, #f4f6fa); font: 750 7px/1.15 Inter, "Segoe UI", sans-serif; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.clipping-caption-templates input:checked + span { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 18px rgba(255,255,255,.2); transform: translateY(-1px); }
.clipping-caption-templates input:focus-visible + span { outline: 2px solid #8fceff; outline-offset: 2px; }
.clipping-caption-templates [data-preset="none"] .clipping-caption-sample { color: #c5cad2; font: 400 26px/1 Inter, "Segoe UI", sans-serif; text-shadow: none; transform: none; }
.clipping-caption-templates [data-preset="chrome-pink"] .clipping-caption-sample,
.clipping-caption-templates [data-preset="gum-pop"] .clipping-caption-sample,
.clipping-caption-templates [data-preset="pearl-gold"] .clipping-caption-sample,
.clipping-caption-templates [data-preset="studio-wood"] .clipping-caption-sample { font-size: 14px; }
.clipping-caption-sample.material-text { --material-face: linear-gradient(#fff,#bbb); --material-highlight: linear-gradient(#fff,transparent 52%); --material-edge: #17121a; --material-extrusion: #332638; --material-stroke: .05em; --material-depth-x: .07em; --material-depth-y: .11em; --material-shadow: 0 .2em .22em rgba(0,0,0,.55); position: relative; z-index: 0; isolation: isolate; color: transparent!important; background: var(--material-face); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: var(--material-stroke) var(--material-edge); paint-order: stroke fill; text-shadow: var(--material-shadow)!important; filter: saturate(1.12) contrast(1.06); }
.clipping-caption-sample.material-text::before,
.clipping-caption-sample.material-text::after { content: attr(data-text); position: absolute; z-index: -1; inset: 0; display: grid; place-items: center; color: var(--material-extrusion); -webkit-text-fill-color: var(--material-extrusion); -webkit-text-stroke: .06em var(--material-edge); font: inherit; font-style: inherit; letter-spacing: inherit; line-height: inherit; text-align: center; transform: translate(var(--material-depth-x),var(--material-depth-y)); pointer-events: none; }
.clipping-caption-sample.material-text::after { z-index: 1; color: transparent; background: var(--material-highlight); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: .012em rgba(255,255,255,.5); opacity: .7; transform: translate(-.01em,-.018em); }
.clipping-caption-sample.material-text--chrome-pink { --material-face: linear-gradient(180deg,#fffaff 0%,#ffd9ed 10%,#a82d70 24%,#ffe9f4 39%,#e45b9f 55%,#6f154a 72%,#ffc8e5 88%,#8e235e 100%); --material-highlight: linear-gradient(180deg,#fff 0 9%,transparent 29%,rgba(255,255,255,.82) 43%,transparent 60%); --material-edge:#3a092d; --material-extrusion:#76164e; --material-shadow:.03em .04em 0 #b9387d,.08em .13em 0 #681142,.15em .23em .22em rgba(48,4,30,.58); }
.clipping-caption-sample.material-text--gum-pop { --material-face: linear-gradient(180deg,#ffd5ec,#ff91cc 16%,#ff43aa 42%,#ee177f 67%,#ff72bd 84%,#bd0f69); --material-highlight:linear-gradient(175deg,#fff 0 8%,rgba(255,255,255,.6) 13%,transparent 35%); --material-edge:#21103e; --material-extrusion:#a91169; --material-stroke:.07em; --material-shadow:.04em .06em 0 #f63aa2,.09em .14em 0 #9f1265,.16em .24em 0 #24113f,.22em .3em .24em rgba(5,4,20,.7); }
.clipping-caption-sample.material-text--pearl-gold { --material-face:linear-gradient(180deg,#fff,#eee9df 17%,#fffdf8 35%,#c8c5c0 57%,#fff 74%,#d8d2c7); --material-highlight:linear-gradient(168deg,#fff 0 17%,transparent 34%,rgba(255,255,255,.92) 54%,transparent 72%); --material-edge:#956014; --material-extrusion:#b87517; --material-stroke:.022em; --material-shadow:.03em .04em 0 #f9d875,.08em .1em 0 #a56613,.14em .18em 0 #68400e,.24em .32em .26em rgba(29,21,9,.52); }
.clipping-caption-sample.material-text--pearl-gold::after { -webkit-text-stroke: .072em rgba(255,255,255,.96); opacity: .94; }
.clipping-caption-sample.material-text--studio-wood { --material-face:repeating-linear-gradient(102deg,rgba(255,239,184,.3) 0 .035em,rgba(92,42,16,.12) .045em .085em),linear-gradient(180deg,#f2c475,#a75c28 34%,#e7a653 52%,#75401f 76%,#c47b35); --material-highlight:repeating-linear-gradient(100deg,rgba(255,244,199,.62) 0 .018em,transparent .025em .095em); --material-edge:#38200f; --material-extrusion:#5b2d17; --material-shadow:.04em .05em 0 #9c572b,.09em .12em 0 #4d2614,.16em .22em 0 #24130c,.23em .3em .24em rgba(0,0,0,.75); }
.clipping-preset-palette-note { grid-column: 1 / -1; margin: -1px 2px 1px; color: #8492a3; font-size: 8px; line-height: 1.35; }
.clipping-word-effects { grid-column: 1 / -1; min-width: 0; margin: 2px 0 0; padding: 12px; border: 1px solid #343c48; border-radius: 8px; }
.clipping-word-effects legend { padding: 0 5px; color: #dce5ef; font-size: 10px; font-weight: 800; }
.clipping-word-effects > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.clipping-word-effects label { min-width: 0; cursor: pointer; }
.clipping-word-effects input { position: absolute; opacity: 0; pointer-events: none; }
.clipping-word-effects label span { min-height: 70px; margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 7px 8px; color: #aeb9c6; border: 1px solid #3d4755; border-radius: 7px; background: #0c1016; transition: .18s ease; }
.clipping-word-effects label i { width: max-content; margin-bottom: 5px; display: inline-block; color: var(--word-effect-inactive, #fff); font: normal 900 7px/1 "Arial Black", sans-serif; letter-spacing: .04em; transform-origin: center bottom; }
.clipping-word-effects label b { color: #edf2f7; font-size: 10px; }.clipping-word-effects label small { margin-top: 3px; color: #758396; font-size: 8px; line-height: 1.2; }
.clipping-word-effects input:checked + span { border-color: #8fceff; background: linear-gradient(135deg, rgba(53,145,218,.25), rgba(116,68,204,.2)); box-shadow: 0 0 0 1px rgba(143,206,255,.3), 0 0 18px rgba(69,155,255,.2); }
.clipping-word-effects input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.clipping-word-effects input[value="karaoke"]:checked + span i { color: transparent; background: linear-gradient(90deg, var(--word-effect-active, #48ff69) 0 45%, var(--word-effect-inactive, #fff) 55% 100%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; animation: clipping-word-karaoke 1.7s ease-in-out infinite; }
.clipping-word-effects input[value="pop"]:checked + span i { animation: clipping-word-pop 1.45s cubic-bezier(.2,.85,.3,1) infinite; }
.clipping-word-effects input[value="bounce"]:checked + span i { animation: clipping-word-bounce 1.55s cubic-bezier(.2,.75,.3,1) infinite; }
.clipping-word-effects input[value="flash"]:checked + span i { animation: clipping-word-flash 1.6s ease-out infinite; }
@keyframes clipping-word-karaoke { 0%,15% { background-position: 100% 0; } 72%,100% { background-position: 0 0; } }
@keyframes clipping-word-pop { 0%,48%,100% { color: var(--word-effect-inactive, #fff); transform: scale(1); } 16% { color: var(--word-effect-active, #8fceff); transform: scale(1.22); } 28% { transform: scale(.97); } }
@keyframes clipping-word-bounce { 0%,52%,100% { color: var(--word-effect-inactive, #fff); transform: translateY(0) scale(1); } 15% { color: var(--word-effect-active, #8fceff); transform: translateY(-5px) scaleX(1.08) scaleY(1.2); } 30% { transform: translateY(1px) scaleX(.98) scaleY(.94); } }
@keyframes clipping-word-flash { 0%,48%,100% { color: var(--word-effect-inactive, #fff); filter: none; transform: scale(1); } 14% { color: var(--word-effect-active, #8fceff); filter: drop-shadow(0 0 5px var(--word-effect-active, #7fdcff)) drop-shadow(0 0 9px var(--word-effect-active, #8d69ff)); transform: scale(1.08); } 26% { filter: drop-shadow(0 0 2px var(--word-effect-active, #7fdcff)); transform: scale(1); } }
.clipping-generate { cursor: pointer; transition: .18s ease; }
.clipping-generate[data-ready="true"] { color: #111; border-color: #fff; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 28px rgba(255,255,255,.23); cursor: pointer; }
.clipping-generate[data-ready="true"]:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #fff, 0 0 36px rgba(255,255,255,.38); }
.clipping-generate.loading { color: #a8b1bd; background: #171b22; cursor: progress; box-shadow: none; }
.clipping-loader[hidden] { display: none; }
.clipping-loader { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3, 5, 9, .47); backdrop-filter: blur(11px) saturate(.7); -webkit-backdrop-filter: blur(11px) saturate(.7); }
.clipping-loader-card { display: grid; justify-items: center; animation: clipping-loader-in .32s ease-out both; }
.clipping-coin { position: relative; width: min(190px, 48vw); aspect-ratio: 1; transform-style: preserve-3d; perspective: 1000px; animation: clipping-logo-coin 9s cubic-bezier(.42, 0, .58, 1) infinite; }
.clipping-coin::before, .clipping-coin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Reverso: el mismo emblema, no una textura de sustitución. */
.clipping-coin::before { z-index: 1; background: url('./assets/clipping-loader-logo.avif') center / contain no-repeat; filter: contrast(1.08) saturate(1.16) drop-shadow(0 0 7px rgba(37,157,255,.65)); transform: rotateY(180deg) translateZ(12px); }
/* Canto extrusionado y aro de relieve que conectan ambas caras. */
.clipping-coin::after { inset: 1.5%; z-index: 3; border: 3px solid #51bfff; background: radial-gradient(circle at 32% 22%, rgba(196,232,255,.18), transparent 25%); box-shadow: inset 0 0 0 3px #071b38, inset 0 0 0 6px rgba(48,174,255,.7), inset 0 0 15px rgba(90,197,255,.72), 0 0 0 3px #061225, 0 0 12px rgba(40,166,255,.92), 0 0 29px rgba(21,109,255,.58), 0 15px 28px rgba(0,0,0,.72); transform: translateZ(13px); }
.clipping-loader-logo { position: relative; z-index: 2; width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: contrast(1.08) saturate(1.16) drop-shadow(0 0 7px rgba(37,157,255,.65)); transform: translateZ(14px); }
.clipping-loader-card p { margin: 20px 0 0; color: #f4f8ff; font-size: 14px; font-weight: 750; letter-spacing: .01em; text-align: center; text-shadow: 0 2px 15px #000; }
.clipping-loader-dots { display: inline-flex; width: 22px; justify-content: flex-start; }
.clipping-loader-dots i { width: 4px; height: 4px; margin: 0 1px; display: inline-block; border-radius: 50%; background: currentColor; animation: clipping-dot 1.15s infinite ease-in-out; }
.clipping-loader-dots i:nth-child(2) { animation-delay: .15s; }.clipping-loader-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes clipping-logo-coin { 0% { transform: rotateX(-17deg) rotateY(-24deg) rotateZ(-8deg) scale(1); } 24% { transform: rotateX(25deg) rotateY(155deg) rotateZ(11deg) scale(1.035); } 50% { transform: rotateX(-20deg) rotateY(360deg) rotateZ(-9deg) scale(1); } 73% { transform: rotateX(18deg) rotateY(205deg) rotateZ(9deg) scale(1.035); } 100% { transform: rotateX(-17deg) rotateY(0deg) rotateZ(-8deg) scale(1); } }
@keyframes clipping-dot { 0%,70%,100% { opacity: .18; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes clipping-loader-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .clipping-coin, .clipping-loader-dots i, .clipping-loader-card, .clipping-word-effects input:checked + span i { animation: none; } }
.clipping-project-view[hidden] { display: none; }
.clipping-project-view { min-height: 100vh; color: #f5f8fb; background: #08090d; }
.clipping-project-topbar { min-height: 78px; padding: 0 34px; display: flex; align-items: center; gap: 19px; border-bottom: 1px solid #20232b; background: rgba(9,10,14,.9); }
.clipping-project-topbar > div { min-width: 0; }.clipping-project-topbar small, .clipping-project-main header > span { color: #6dbdff; font-size: 9px; font-weight: 850; letter-spacing: .11em; }.clipping-project-topbar h2 { margin: 4px 0 0; font-size: 15px; }.clipping-project-topbar > span { margin-left: auto; color: #91a0b1; font-size: 12px; }
.clipping-project-back { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: #dce7f2; border: 1px solid #353b47; border-radius: 7px; background: #11141a; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }.clipping-project-back:hover { color: #fff; border-color: #75beff; box-shadow: 0 0 15px rgba(72,167,255,.2); }.clipping-project-back .icon { width: 15px; height: 15px; }
.clipping-project-main { width: min(1480px, calc(100% - 68px)); margin: 0 auto; padding: 49px 0 82px; }.clipping-project-main header { margin-bottom: 31px; }.clipping-project-main h1 { margin: 8px 0; font-size: clamp(27px, 3vw, 42px); letter-spacing: -.04em; }.clipping-project-main p { margin: 0; color: #909ba9; font-size: 13px; }.clipping-project-summary { max-width: 720px; margin-top: 10px !important; padding: 12px 15px; color: #c3d6ea !important; border: 1px solid #263041; border-radius: 8px; background: rgba(94,166,255,.07); line-height: 1.5; }
.clipping-project-warning { max-width: 720px; margin-top: 10px !important; padding: 12px 15px; color: #ffd9a8 !important; border: 1px solid #4a3a1f; border-radius: 8px; background: rgba(255,177,64,.08); line-height: 1.5; }
.clipping-project-warning[hidden] { display: none; }
.clipping-project-chapters { max-width: 720px; margin: -11px 0 31px; padding: 15px; border: 1px solid #293647; border-radius: 9px; background: rgba(18,31,47,.44); }
.clipping-project-chapters[hidden] { display: none; }
.clipping-project-chapters-heading { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clipping-project-chapters h2 { margin: 0; color: #dcecff; font-size: 12px; font-weight: 800; }
.clipping-project-chapters-heading button { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; color: #c9e6ff; border: 1px solid #38506a; border-radius: 6px; background: rgba(40,83,119,.25); font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.clipping-project-chapters-heading button:hover { color: #07101b; border-color: #fff; background: #fff; }
.clipping-project-chapters-heading button:focus-visible { outline: 2px solid #8fceff; outline-offset: 2px; }
.clipping-project-chapters-heading .icon { width: 13px; height: 13px; }
.clipping-project-chapters ol { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.clipping-project-chapters li { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; color: #c3cedb; font-size: 12px; line-height: 1.35; }
.clipping-project-chapters time { padding: 3px 5px; color: #91cdfb; border-radius: 4px; background: rgba(97,170,226,.12); font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.clipping-project-chapters li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clipping-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 30px 22px; }
.clipping-clip-card { min-width: 0; }.clipping-clip-preview-trigger { width: 100%; padding: 0; display: block; color: inherit; border: 0; background: transparent; font: inherit; text-align: left; cursor: zoom-in; }.clipping-clip-preview-trigger:focus-visible { outline: 2px solid #8fceff; outline-offset: 4px; border-radius: 12px; }.clipping-clip-media { position: relative; width: 100%; display: block; aspect-ratio: var(--clipping-clip-aspect-ratio, 9 / 16); overflow: hidden; border: 1px solid #242a35; border-radius: 10px; background: #000; box-shadow: 0 13px 25px rgba(0,0,0,.25); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.clipping-clip-preview-trigger:hover .clipping-clip-media { border-color: #8fceff; box-shadow: 0 0 0 1px rgba(143,206,255,.35), 0 16px 29px rgba(0,0,0,.32), 0 0 20px rgba(67,157,255,.18); transform: translateY(-2px); }.clipping-clip-media video { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }.clipping-clip-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.52)); pointer-events: none; }.clipping-clip-index { position: absolute; z-index: 1; top: 9px; left: 9px; padding: 5px 7px; color: #d5ebff; border: 1px solid rgba(128,195,255,.45); border-radius: 5px; background: rgba(5,12,23,.75); font-size: 9px; font-weight: 850; letter-spacing: .08em; }.clipping-clip-duration { position: absolute; z-index: 1; right: 9px; bottom: 9px; padding: 4px 6px; color: #fff; border-radius: 5px; background: rgba(4,5,8,.74); font-size: 9px; font-weight: 800; }.clipping-clip-score { position: absolute; z-index: 1; top: 9px; right: 9px; padding: 5px 7px; border: 1px solid rgba(128,195,255,.45); border-radius: 5px; background: rgba(5,12,23,.75); font-size: 9px; font-weight: 850; letter-spacing: .04em; }.clipping-clip-score[data-tier="high"] { color: #7bffb0; border-color: rgba(123,255,176,.5); }.clipping-clip-score[data-tier="mid"] { color: #ffd27b; border-color: rgba(255,210,123,.5); }.clipping-clip-score[data-tier="low"] { color: #ff9b9b; border-color: rgba(255,155,155,.5); }
.clipping-clip-reframe { position: absolute; z-index: 1; left: 9px; bottom: 9px; padding: 4px 6px; color: #bcefc9; border: 1px solid rgba(123,255,176,.35); border-radius: 5px; background: rgba(5,12,23,.75); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.clipping-clip-reframe[data-provider="local"] { color: #ffd27b; border-color: rgba(255,210,123,.4); }
.clipping-clip-reframe[data-provider="centrado"] { color: #ff9b9b; border-color: rgba(255,155,155,.4); }
.clipping-clip-reframe[data-provider="completo"] { color: #9fb4c9; border-color: rgba(159,180,201,.35); }
.clipping-clip-preview-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(5,10,18,.63); box-shadow: 0 8px 20px rgba(0,0,0,.42); transform: translate(-50%, -50%); transition: transform .18s ease, background .18s ease; }.clipping-clip-preview-play .icon { width: 18px; height: 18px; margin-left: 2px; }.clipping-clip-preview-trigger:hover .clipping-clip-preview-play { background: rgba(27,116,190,.86); transform: translate(-50%, -50%) scale(1.08); }
.clipping-clip-title { min-height: 35px; margin: 12px 0 9px; display: block; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.35; }.clipping-clip-brands { margin: -5px 0 9px; display: block; overflow: hidden; color: #8ea2b8; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.clipping-clip-actions { display: flex; align-items: center; gap: 8px; }.clipping-clip-actions a, .clipping-clip-actions button { min-height: 33px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; color: #bed0e1; border: 1px solid #303947; border-radius: 6px; background: #11151c; font: inherit; font-size: 10px; font-weight: 750; text-decoration: none; cursor: pointer; }.clipping-clip-actions a:hover, .clipping-clip-actions button:hover { color: #07101b; border-color: #fff; background: #fff; }.clipping-clip-actions .icon { width: 14px; height: 14px; }.clipping-clip-actions button { flex: 1; color: #f8fbff; border-color: #5babe7; background: linear-gradient(135deg, #1d6ba4, #387fc1); }
.clipping-clip-analysis { margin: -3px 0 10px; padding: 8px 9px; display: grid; gap: 4px; color: #aab8c7; border: 1px solid rgba(96,170,229,.22); border-radius: 6px; background: rgba(55,126,185,.08); font-size: 10px; line-height: 1.4; }
.clipping-clip-analysis b { color: #81c9ff; font-size: 8px; letter-spacing: .08em; }
@media (max-width: 650px) { .clipping-project-topbar { min-height: 68px; padding: 0 16px; gap: 11px; }.clipping-project-topbar > span { display: none; }.clipping-project-main { width: min(100% - 32px, 520px); padding-top: 34px; }.clipping-project-chapters-heading button span { display: none; }.clipping-project-chapters-heading button { padding: 0 8px; }.clipping-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 13px; }.clipping-clip-title { font-size: 11px; }.clipping-clip-actions { gap: 5px; }.clipping-clip-actions a, .clipping-clip-actions button { padding: 0 7px; font-size: 9px; } }
.clipping-moments { margin-top: 19px; }
.clipping-moments span { display: flex !important; justify-content: space-between; }
.clipping-moments small { color: #738090; font-size: 9px; font-weight: 600; }
.clipping-moments textarea { min-height: 84px; padding: 11px; resize: vertical; line-height: 1.5; }
.clipping-moments textarea::placeholder { color: #6f7988; }
.clipping-consent { margin-top: 17px; display: flex; align-items: flex-start; gap: 8px; color: #a4adba; font-size: 10px; line-height: 1.5; cursor: pointer; }
.clipping-consent input { position: absolute; opacity: 0; pointer-events: none; }
.clipping-consent > span { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0 !important; border: 1px solid #4b5664; border-radius: 4px; background: #11151c; }
.clipping-consent input:checked + span { border-color: transparent; background: linear-gradient(135deg, var(--vid-cyan), var(--vid-violet)); box-shadow: inset 0 0 0 4px #11151c; }
.clipping-generate { width: 100%; min-height: 50px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #a0a7b2; border: 1px solid #343b46; border-radius: 7px; background: #171b22; font: inherit; font-size: 12px; font-weight: 800; cursor: not-allowed; }
.clipping-generate .icon { width: 16px; height: 16px; }
.clipping-generate small { padding: 3px 5px; color: #87a6c6; border: 1px solid #3f5d7a; border-radius: 4px; font-size: 8px; }

@media (max-width: 850px) {
  .clipping-view { display: block; }
  .clipping-main { width: min(100% - 32px, 680px); padding: 46px 0 58px; }
  .clipping-hero { grid-template-columns: 1fr; gap: 28px; }
  .clipping-hero-visual { width: min(100%, 680px); max-width: none; justify-self: stretch; }
  .clipping-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .clipping-view {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
  }
}

@media (max-width: 520px) {
  .clipping-hero h1 { font-size: 39px; }
  .clipping-hero-copy > span { font-size: 12px; }
  .clipping-hero-visual img { border-radius: 12px; }
  .clipping-settings-grid { grid-template-columns: 1fr; }
  .clipping-preview { grid-template-columns: minmax(150px, .9fr) minmax(0, 1fr); }
  .clipping-subtitle-options { grid-template-columns: 1fr; }
  .clipping-caption-templates { grid-template-columns: repeat(3, 1fr); }
  .clipping-word-effects > div { grid-template-columns: repeat(2, 1fr); }
  .clipping-settings-tabs { gap: 15px; }
}

.dashboard-sidebar {
  position: sticky;
  z-index: 40;
  top: 0;
  width: 238px;
  height: 100vh;
  height: 100dvh;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #24252d;
  background: #0c0d12;
  transition: width 200ms ease, padding 200ms ease;
}

.sidebar-brand-row {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 750;
}

.sidebar-brand > span:last-child span {
  color: var(--vid-cyan);
}

.sidebar-brand .brand-mark {
  width: 42px;
  height: 42px;
}

.sidebar-brand .brand-mark .icon {
  width: 17px;
  height: 17px;
}

.sidebar-close {
  width: 34px;
  height: 34px;
  padding: 0;
  display: none;
  place-items: center;
  color: #b9bac4;
  border: 1px solid #2f3038;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.sidebar-account {
  min-width: 0;
  margin: 22px 0 24px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid #2b2c34;
  border-radius: 7px;
  background: #14151b;
}

.sidebar-account-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* La tarjeta de usuario lleva al área de usuario, así que es un <button> en
   index.html y un <a> en el resto de páginas: estos reinicios la dejan igual
   que cuando era un <div>. */
.sidebar-account {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-account:hover {
  border-color: #3a3b46;
  background: #191a21;
}

.sidebar-account:focus-visible {
  outline: 2px solid var(--vid-cyan, #29d0ff);
  outline-offset: 2px;
}

.sidebar-plan {
  align-self: center;
}

.sidebar-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  overflow: hidden;
  place-items: center;
  color: #fff;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral));
  font-size: 10px;
  font-weight: 800;
}

.sidebar-account > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-account strong {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.sidebar-account div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account strong {
  font-size: 12px;
}

.sidebar-account div span {
  color: #898a95;
  font-size: 12px;
}

.sidebar-plan {
  padding: 4px 5px;
  color: var(--vid-lime);
  border: 1px solid rgba(201, 255, 61, .22);
  border-radius: 3px;
  background: rgba(201, 255, 61, .07);
  font-size: 9px;
  font-weight: 800;
}

.sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 5px;
  margin-right: -6px;
  padding-right: 6px;
  margin-top: -4px;
  padding-top: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #343641 transparent;
  scrollbar-width: thin;
}

.sidebar-section-label {
  margin: 0 10px 7px;
  color: #656671;
  font-size: 10px;
  font-weight: 800;
}

.sidebar-account-label {
  margin-top: 14px;
}

.sidebar-link {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: #a5a6b1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.sidebar-link:hover {
  color: #fff;
  background: #17181f;
}

.sidebar-link.active {
  color: #fff;
  border-color: #30313a;
  background: linear-gradient(100deg, rgba(25, 217, 255, .12), rgba(116, 87, 255, .12), rgba(255, 71, 126, .09));
}

.sidebar-link .icon {
  width: 17px;
  height: 17px;
}

.sidebar-link small {
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: #d2d3db;
  border-radius: 50%;
  background: #282932;
  font-size: 8px;
}

.sidebar-link-badge {
  min-width: 30px;
  padding: 4px 6px;
  color: #d9e5ff;
  border: 1px solid rgba(111, 144, 255, .34);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .2), rgba(57, 112, 245, .2));
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
}

.sidebar-footer {
  flex: 0 0 auto;
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.sidebar-footer > .sidebar-account-label {
  margin: 0 10px -3px;
}

.sidebar-auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.sidebar-auth-actions[hidden] {
  display: none;
}

.sidebar-credits[hidden],
.dashboard-credit-pill[hidden] {
  display: none;
}

.sidebar-auth-actions button {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f3f4f8;
  border: 1px solid #393a44;
  border-radius: 5px;
  background: #181920;
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.sidebar-auth-actions button:last-child {
  color: #0b0c10;
  border-color: transparent;
  background: #f0f1f4;
}

.sidebar-auth-actions button:hover,
.sidebar-auth-actions button:focus-visible {
  border-color: var(--vid-cyan);
  outline: none;
}

.sidebar-auth-actions .icon {
  width: 14px;
  height: 14px;
}

.sidebar-credits {
  width: 100%;
  padding: 12px;
  color: inherit;
  border: 1px solid #2c2d35;
  border-radius: 7px;
  background: #13141a;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.sidebar-credits:hover,
.sidebar-credits:focus-visible {
  border-color: #484a55;
  background: #181920;
  outline: none;
}

.sidebar-credits > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #90919c;
  font-size: 10px;
  font-weight: 700;
}

.sidebar-credits .icon {
  width: 13px;
  height: 13px;
  color: var(--vid-orange);
}

.sidebar-credits > strong {
  display: block;
  margin: 7px 0 8px;
  font-size: 20px;
}

.credits-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #30313a;
}

.credits-meter span {
  width: 62%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

body.developer-plan .credits-meter span {
  width: 100%;
  box-shadow: 0 0 12px rgba(92, 203, 255, .48);
}

body.developer-plan .sidebar-plan {
  color: #9de2ff;
  border-color: rgba(105, 202, 255, .34);
  background: rgba(37, 126, 187, .12);
  text-shadow: 0 0 10px rgba(125, 216, 255, .28);
}

.sidebar-toggle {
  position: absolute;
  z-index: 3;
  top: 54%;
  right: -17px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  display: none;
  flex-shrink: 0;
  place-items: center;
  color: #b9bac4;
  border: 1px solid #2f3038;
  border-radius: 50%;
  background: #111319;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.sidebar-toggle:hover {
  color: #fff;
  background: #17181f;
}

.sidebar-toggle .icon {
  width: 15px;
  height: 15px;
  transition: transform 200ms ease;
  transform: rotate(180deg);
}

@media (min-width: 981px) {
  .sidebar-toggle {
    display: grid;
  }

  .dashboard-view.sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .dashboard-sidebar.collapsed .sidebar-toggle .icon {
    transform: rotate(0deg);
  }

  .dashboard-sidebar.collapsed {
    width: 78px;
    padding: 20px 12px 16px;
  }

  .dashboard-sidebar.collapsed .sidebar-brand-row {
    height: 50px;
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .dashboard-sidebar.collapsed .sidebar-brand-name,
  .dashboard-sidebar.collapsed .sidebar-account-row > div,
  .dashboard-sidebar.collapsed .sidebar-plan,
  .dashboard-sidebar.collapsed .sidebar-section-label,
  .dashboard-sidebar.collapsed .sidebar-link span,
  .dashboard-sidebar.collapsed .sidebar-link small,
  .dashboard-sidebar.collapsed .sidebar-link-badge,
  .dashboard-sidebar.collapsed .sidebar-auth-actions button span,
  .dashboard-sidebar.collapsed .sidebar-credits > div:first-child > span,
  .dashboard-sidebar.collapsed .sidebar-credits .credits-meter {
    display: none;
  }

  .dashboard-sidebar.collapsed .sidebar-brand {
    gap: 0;
  }

  .dashboard-sidebar.collapsed .sidebar-account {
    padding: 12px 0;
    align-items: center;
  }

  .dashboard-sidebar.collapsed .sidebar-account-row {
    justify-content: center;
  }

  .dashboard-sidebar.collapsed .sidebar-link {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .dashboard-sidebar.collapsed .sidebar-credits {
    padding: 12px 0;
    text-align: center;
  }

  .dashboard-sidebar.collapsed .sidebar-credits > strong {
    margin: 6px 0 0;
  }

  .dashboard-sidebar.collapsed .sidebar-credits > div:first-child {
    justify-content: center;
    gap: 0;
  }

  .dashboard-sidebar.collapsed .sidebar-auth-actions {
    justify-items: center;
  }

  .dashboard-sidebar.collapsed .sidebar-auth-actions button:first-child {
    width: 40px;
    padding: 0;
  }

  .dashboard-sidebar.collapsed .sidebar-auth-actions button:last-child {
    display: none;
  }
}

.dashboard-shell {
  min-width: 0;
}

.dashboard-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 72px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #24252d;
  background: rgba(9, 10, 15, .93);
  backdrop-filter: blur(14px);
}

.dashboard-menu-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: none;
  place-items: center;
  color: #fff;
  border: 1px solid #30313a;
  border-radius: 50%;
  background: #15161d;
  cursor: pointer;
}

.dashboard-breadcrumb {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.dashboard-breadcrumb span {
  flex: 0 0 auto;
  color: #686974;
  font-size: 10px;
  font-weight: 800;
}

.dashboard-breadcrumb strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-create-menu {
  display: none;
}

@media (min-width: 1280px) {
  .dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(360px, 1fr);
  }

  .dashboard-create-menu {
    position: relative;
    z-index: 5;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    justify-self: center;
  }

  .dashboard-create-group {
    position: static;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .dashboard-create-trigger {
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #a8abb2;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 720;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  }

  .dashboard-studio-trigger {
    position: relative;
    overflow: visible;
    text-decoration: none;
  }

  .dashboard-studio-badge {
    position: absolute;
    top: -7px;
    right: -6px;
    min-width: 29px;
    height: 16px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 999px;
    background: #168cff;
    box-shadow: 0 0 12px rgba(22, 140, 255, .52), inset 0 1px 0 rgba(255, 255, 255, .28);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    pointer-events: none;
    transition: background 150ms ease, box-shadow 150ms ease;
  }

  .dashboard-studio-entry:hover .dashboard-studio-badge,
  .dashboard-studio-entry:focus-within .dashboard-studio-badge {
    background: #3aa0ff;
    box-shadow: 0 0 16px rgba(22, 140, 255, .72), inset 0 1px 0 rgba(255, 255, 255, .34);
  }

  .dashboard-create-trigger > .icon {
    width: 11px;
    height: 11px;
    transform: rotate(90deg);
    transition: transform 180ms ease;
  }

  .dashboard-create-group:hover .dashboard-create-trigger,
  .dashboard-create-group:focus-within .dashboard-create-trigger,
  .dashboard-create-group.is-open .dashboard-create-trigger {
    color: #fff;
    border-color: rgba(90, 165, 255, .28);
    background: rgba(29, 104, 202, .16);
    box-shadow: inset 0 0 0 1px rgba(111, 183, 255, .04), 0 0 18px rgba(22, 140, 255, .08);
    outline: none;
  }

  .dashboard-create-group:hover .dashboard-create-trigger > .icon,
  .dashboard-create-group:focus-within .dashboard-create-trigger > .icon,
  .dashboard-create-group.is-open .dashboard-create-trigger > .icon {
    transform: rotate(270deg);
  }

  .dashboard-create-direct:hover .dashboard-create-trigger,
  .dashboard-create-direct:focus-within .dashboard-create-trigger {
    color: #fff;
  }

  .dashboard-create-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(760px, calc(100vw - 340px));
    padding-top: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
  }

  .dashboard-create-group:hover .dashboard-create-dropdown,
  .dashboard-create-group:focus-within .dashboard-create-dropdown,
  .dashboard-create-group.is-open .dashboard-create-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .dashboard-create-group.is-selection-closing .dashboard-create-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
  }

  .dashboard-create-dropdown-surface {
    overflow: hidden;
    padding: 20px;
    border: 1px solid #292d34;
    border-radius: 16px;
    background: rgba(18, 20, 24, .98);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(22px);
  }

  .dashboard-create-dropdown-heading {
    margin-bottom: 14px;
    padding: 0 4px 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .dashboard-create-dropdown-heading span {
    color: #6caeff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
  }

  .dashboard-create-dropdown-heading strong {
    color: #d7d9df;
    font-size: 12px;
    font-weight: 650;
  }

  .dashboard-create-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-create-option {
    min-width: 0;
    min-height: 72px;
    padding: 10px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
  }

  .dashboard-create-option > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #a9d2ff;
    border: 1px solid #2b3038;
    border-radius: 10px;
    background: #202329;
  }

  .dashboard-create-option > span .icon {
    width: 18px;
    height: 18px;
  }

  .dashboard-create-option > div {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .dashboard-create-option strong {
    overflow: hidden;
    color: #f6f7f8;
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-create-option small {
    overflow: hidden;
    color: #777b84;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-create-option > .icon {
    width: 14px;
    height: 14px;
    color: #5e636d;
    opacity: 0;
    transform: translateX(-4px);
    transition: color 150ms ease, opacity 150ms ease, transform 150ms ease;
  }

  .dashboard-create-option:hover,
  .dashboard-create-option:focus-visible {
    color: #fff;
    border-color: rgba(87, 159, 255, .2);
    background: #202329;
    outline: none;
    transform: translateY(-1px);
  }

  .dashboard-create-option:hover > span,
  .dashboard-create-option:focus-visible > span {
    color: #fff;
    border-color: rgba(92, 168, 255, .48);
    background: rgba(22, 140, 255, .16);
    box-shadow: 0 0 16px rgba(22, 140, 255, .12);
  }

  .dashboard-create-option:hover > .icon,
  .dashboard-create-option:focus-visible > .icon {
    color: #75b7ff;
    opacity: 1;
    transform: translateX(0);
  }

  .dashboard-breadcrumb {
    justify-self: start;
  }

  .dashboard-top-actions {
    justify-self: end;
  }
}

.dashboard-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-auth-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dashboard-auth-actions[hidden],
.dashboard-profile-wrap[hidden] {
  display: none;
}

.dashboard-login-button,
.dashboard-register-button {
  height: 38px;
  padding: 0 12px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-login-button {
  color: #e8e9ef;
  border: 1px solid #3a3b45;
  background: #191a21;
}

.dashboard-register-button {
  color: #0b0c10;
  border: 1px solid #fff;
  background: #f2f3f6;
}

.dashboard-login-button:hover,
.dashboard-login-button:focus-visible,
.dashboard-register-button:hover,
.dashboard-register-button:focus-visible {
  border-color: var(--vid-cyan);
  outline: none;
}

.guest-session .sidebar-plan {
  color: var(--vid-cyan);
  border-color: rgba(25, 217, 255, .22);
  background: rgba(25, 217, 255, .07);
}

.dashboard-credit-pill {
  height: 38px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c9cad2;
  border: 1px solid #2c2d35;
  border-radius: 999px;
  background: #14151b;
  font-size: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.dashboard-credit-pill:hover,
.dashboard-credit-pill:focus-visible {
  color: #fff;
  border-color: #484a55;
  background: #1a1b22;
  outline: none;
}

.dashboard-credit-pill .icon {
  width: 13px;
  height: 13px;
  color: var(--vid-orange);
  fill: rgba(255, 155, 61, .15);
}

.dashboard-credit-pill strong {
  color: #fff;
  font-size: 12px;
}

.dashboard-plans-button {
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #e8e9ef;
  border: 1px solid #3a3b45;
  border-radius: 5px;
  background: #191a21;
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.dashboard-plans-button .icon {
  width: 14px;
  height: 14px;
  color: var(--vid-cyan);
}

.dashboard-plans-button:hover,
.dashboard-plans-button:focus-visible {
  color: #fff;
  border-color: rgba(25, 217, 255, .55);
  background: rgba(25, 217, 255, .09);
  outline: none;
}

.dashboard-new-button {
  height: 38px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
  box-shadow: 0 7px 20px rgba(116, 87, 255, .2);
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.dashboard-new-button .icon {
  width: 14px;
  height: 14px;
}

.dashboard-profile-wrap .profile-menu {
  top: calc(100% + 12px);
  color: #f7f7fb;
  border-color: #30313a;
  background: #15161c;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .42);
}

.dashboard-profile-wrap .profile-button {
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.dashboard-profile-wrap .profile-summary div span {
  color: #858691;
}

.dashboard-profile-wrap .profile-plan {
  border-color: #33343d;
  background: linear-gradient(100deg, rgba(25, 217, 255, .08), rgba(255, 71, 126, .08), rgba(201, 255, 61, .07));
}

.dashboard-profile-wrap .profile-menu > button {
  color: #a9aab4;
  border-top-color: #30313a;
  background: #15161c;
}

.dashboard-profile-wrap .profile-menu > button:hover {
  color: #fff;
  background: #1d1e26;
}

.dashboard-main {
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: 32px 34px 50px;
}

.dashboard-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 26px;
}

.dashboard-kicker {
  margin: 0 0 8px;
  color: var(--vid-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(25, 217, 255, .35);
}

.dashboard-heading-row h1 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  font-weight: 750;
}

.dashboard-heading-row > div:first-child > span {
  display: block;
  margin-top: 9px;
  color: #868793;
  font-size: 10px;
}

.dashboard-date {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #898a95;
  font-size: 9px;
}

.dashboard-date .icon {
  width: 14px;
  height: 14px;
}

.plans-main {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 42px 34px 58px;
}

.plans-main[hidden] {
  display: none;
}

.plans-page {
  position: relative;
  width: 100%;
}

.plans-heading {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.plans-heading > p {
  margin: 0 0 10px;
  color: var(--vid-cyan);
  font-size: 8px;
  font-weight: 800;
}

.plans-heading h1 {
  margin: 0;
  color: #fff;
  font-size: 38px;
  line-height: 1.08;
  font-weight: 750;
}

.plans-heading > span {
  display: block;
  margin-top: 13px;
  color: #91929d;
  font-size: 11px;
  line-height: 1.5;
}

.billing-switch {
  width: max-content;
  margin: 23px auto 0;
  padding: 3px;
  display: grid;
  grid-template-columns: 92px 154px;
  gap: 3px;
  border: 1px solid #33343d;
  border-radius: 7px;
  background: #14151b;
}

.billing-switch button {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #7f808b;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.billing-switch button.active {
  color: #0b0c10;
  background: #f1f2f5;
}

.billing-switch button:focus-visible {
  outline: 2px solid var(--vid-cyan);
  outline-offset: 2px;
}

.billing-switch small {
  padding: 3px 5px;
  color: #192005;
  border-radius: 3px;
  background: var(--vid-lime);
  font-size: 7px;
  font-weight: 850;
}

.plans-capabilities {
  margin: 29px 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px 34px;
  color: #8d8e99;
}

.plans-capabilities span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 650;
}

.plans-capabilities .icon {
  width: 15px;
  height: 15px;
  color: #c8c9d1;
}

.account-main {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 42px 34px 58px;
}

.account-main[hidden] {
  display: none;
}

.account-page {
  width: 100%;
}

.account-heading {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.account-heading > p {
  margin: 0 0 10px;
  color: var(--vid-cyan);
  font-size: 8px;
  font-weight: 800;
}

.account-heading h1 {
  margin: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 750;
}

.account-heading > span {
  display: block;
  margin-top: 13px;
  color: #91929d;
  font-size: 11px;
  line-height: 1.5;
}

.account-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.account-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid #34353e;
  border-radius: 8px;
  background: #121319;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .22);
}

.account-card-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}

.account-card-copy {
  margin: 0 0 14px;
  color: #91929d;
  font-size: 10px;
  line-height: 1.6;
}

.account-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.account-avatar-preview {
  width: 64px;
  height: 64px;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral));
  font-size: 16px;
  font-weight: 800;
}

.account-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-upload-button,
.account-remove-button,
.account-secondary-button {
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f1f2f5;
  border: 1px solid #33343d;
  border-radius: 6px;
  background: #14151b;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.account-upload-button .icon {
  width: 13px;
  height: 13px;
}

.account-upload-button:hover,
.account-remove-button:hover,
.account-secondary-button:hover {
  border-color: var(--vid-cyan);
  background: #1a1b22;
}

.account-remove-button {
  color: #91929d;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-field span {
  color: #91929d;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.account-field input,
.account-field select {
  height: 38px;
  padding: 0 12px;
  color: #f1f2f5;
  border: 1px solid #33343d;
  border-radius: 6px;
  background: #14151b;
  font-size: 11px;
}

.account-field select {
  width: 100%;
  color-scheme: dark;
  cursor: pointer;
}

.account-language-field {
  margin-top: 16px;
}

.account-field input:focus-visible,
.account-field select:focus-visible {
  outline: 2px solid var(--vid-cyan);
  outline-offset: 1px;
}

.account-field input:disabled {
  color: #6d6e78;
  cursor: not-allowed;
}

.account-save-button {
  align-self: flex-start;
  padding: 9px 18px;
  color: #0b0c10;
  border: 0;
  border-radius: 6px;
  background: var(--vid-lime);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.account-save-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.account-status {
  margin: 10px 0 0;
  min-height: 12px;
  color: #91929d;
  font-size: 9px;
}

.account-status.success {
  color: var(--vid-lime);
}

.account-status.error {
  color: var(--vid-coral);
}

.account-plan-row {
  margin-bottom: 16px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #33343d;
  border-radius: 6px;
  background: #14151b;
}

.account-plan-row span {
  color: #91929d;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.account-plan-row strong {
  color: #fff;
  font-size: 12px;
}

.account-card-wide {
  grid-column: 1 / -1;
}

.account-usage-heading {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-usage-heading .account-card-title {
  margin: 0;
}

.account-usage-total-row {
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #33343d;
  border-radius: 6px;
  background: #14151b;
}

.account-usage-total-row span {
  color: #91929d;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.account-usage-total-row strong {
  color: var(--vid-lime);
  font-size: 12px;
}

.account-usage-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.account-usage-item {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #2b2c34;
  border-radius: 6px;
  background: #14151b;
}

.account-usage-item > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-usage-item strong {
  color: #f1f2f5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-usage-item span {
  color: #7f808b;
  font-size: 9px;
  text-transform: capitalize;
}

.account-usage-cost {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--vid-lime);
  font-size: 10px;
  font-weight: 750;
}

.account-usage-cost img {
  width: 13px;
  height: 13px;
}

.account-usage-empty {
  padding: 14px 0;
  color: #7f808b;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 720px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-main { padding: 29px 16px 38px; }
  .account-usage-heading { flex-direction: column; align-items: flex-start; }
}

.plan-code-row {
  position: absolute;
  z-index: 4;
  top: -34px;
  right: 0;
  width: 240px;
  margin: 0;
}

.plan-code-form {
  width: 100%;
  min-width: 0;
}

.plan-code-heading {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: #aeb6c0;
}

.plan-code-heading .icon {
  width: 11px;
  height: 11px;
  color: #69caff;
}

.plan-code-heading label {
  font-size: 8px;
  font-weight: 780;
}

.plan-code-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.plan-code-controls input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  color: #f4f7fa;
  border: 1px solid #343b45;
  border-radius: 6px;
  outline: none;
  background: #10141a;
  font: inherit;
  font-size: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.plan-code-controls input::placeholder {
  color: #68727d;
}

.plan-code-controls input:focus {
  border-color: #68c8ff;
  background: #121923;
  box-shadow: 0 0 0 2px rgba(71, 178, 255, .13), 0 0 18px rgba(81, 190, 255, .12);
}

.plan-code-controls button {
  height: 30px;
  padding: 0 10px;
  color: #f4f9ff;
  border: 1px solid #356f9f;
  border-radius: 6px;
  background: linear-gradient(180deg, #174e7e, #10385f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 8px 20px rgba(0, 36, 73, .24);
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.plan-code-controls button:hover,
.plan-code-controls button:focus-visible {
  border-color: #8ad7ff;
  filter: brightness(1.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 16px rgba(143, 218, 255, .22);
  outline: none;
}

.plan-code-controls button:disabled,
.plan-code-controls input:disabled {
  cursor: default;
  opacity: .62;
}

.plan-code-status {
  min-height: 10px;
  margin: 3px 0 0;
  color: #7f8b97;
  font-size: 7px;
  line-height: 1.35;
  text-align: right;
}

.plan-code-status[data-state="error"] {
  color: #ff8d9a;
}

.plan-code-status[data-state="success"] {
  color: #7dd8ff;
  text-shadow: 0 0 10px rgba(125, 216, 255, .3);
}

.plan-code-form[data-active="true"] .plan-code-heading,
.plan-code-form[data-active="true"] .plan-code-heading .icon {
  color: #8edcff;
  text-shadow: 0 0 11px rgba(142, 220, 255, .32);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.plan-card {
  --plan-accent: var(--vid-cyan);
  position: relative;
  min-width: 0;
  min-height: 560px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #34353e;
  border-radius: 8px;
  background: #121319;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .22);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--plan-accent);
  opacity: .8;
}

.plan-card:hover {
  border-color: #555761;
  transform: translateY(-3px);
}

.plan-card-featured {
  --plan-accent: var(--vid-coral);
  border-color: rgba(255, 71, 126, .48);
  background: linear-gradient(180deg, rgba(255, 71, 126, .065), #13141a 35%);
}

.plan-card-studio {
  --plan-accent: var(--vid-orange);
}

.plan-card-business {
  --plan-accent: var(--vid-lime);
}

.plan-title-row {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.plan-title-row > div {
  min-width: 0;
}

.plan-title-row small {
  display: block;
  margin-bottom: 7px;
  color: var(--plan-accent);
  font-size: 7px;
  font-weight: 850;
}

.plan-title-row h2 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1;
}

.plan-badge {
  flex: 0 0 auto;
  padding: 5px 7px;
  color: #b8b9c2;
  border: 1px solid #383942;
  border-radius: 4px;
  background: #1a1b21;
  font-size: 7px;
  font-weight: 800;
}

.plan-current-badge {
  color: var(--vid-cyan);
  border-color: rgba(25, 217, 255, .24);
  background: rgba(25, 217, 255, .07);
}

.plan-popular-badge {
  color: #ff8bad;
  border-color: rgba(255, 71, 126, .28);
  background: rgba(255, 71, 126, .09);
}

.plan-description {
  min-height: 42px;
  margin: 19px 0 20px;
  color: #92939e;
  font-size: 10px;
  line-height: 1.45;
}

.plan-price-row {
  min-height: 51px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.plan-price-row strong {
  color: #fff;
  font-size: 39px;
  line-height: 1;
  font-weight: 720;
}

.plan-price-row span {
  margin-bottom: 5px;
  color: #b8b9c3;
  font-size: 9px;
  font-weight: 700;
}

.plan-custom-price strong {
  font-size: 26px;
}

.plan-billing-note {
  min-height: 15px;
  margin: 8px 0 20px;
  color: #747580;
  font-size: 8px;
}

.plan-credit-summary {
  min-height: 61px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #292a31;
  border-bottom: 1px solid #292a31;
}

.plan-credit-summary > .icon {
  width: 18px;
  height: 18px;
  color: var(--plan-accent);
}

.plan-credit-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-credit-summary strong {
  color: #f2f2f6;
  font-size: 11px;
}

.plan-credit-summary span {
  color: #7f808b;
  font-size: 8px;
}

.plan-action {
  width: 100%;
  height: 43px;
  margin: 17px 0 21px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
  box-shadow: 0 9px 24px rgba(116, 87, 255, .16);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.plan-action:hover,
.plan-action:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

.plan-action:focus-visible {
  box-shadow: 0 0 0 2px #090a0f, 0 0 0 4px var(--plan-accent);
}

.plan-action-current,
.plan-action-current:disabled {
  color: #777883;
  border-color: #30313a;
  background: #1a1b21;
  box-shadow: none;
  cursor: default;
  filter: none;
}

.plan-action-secondary {
  color: #e8e9ee;
  border-color: #474852;
  background: #202128;
  box-shadow: none;
}

.plan-capacity {
  margin: 0 0 21px;
  padding: 0 0 17px;
  border-bottom: 1px solid #292d34;
}

.plan-capacity > p {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-capacity > p strong {
  color: #e7ebef;
  font-size: 11px;
  line-height: 1.25;
}

.plan-capacity > p span {
  color: #737d88;
  font-size: 8px;
  line-height: 1.3;
}

.plan-capacity ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.plan-capacity li {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px 35px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.plan-capacity li .icon {
  width: 14px;
  height: 14px;
  color: var(--plan-accent);
}

.plan-capacity li strong {
  color: #f5f8fb;
  font-size: 11px;
  line-height: 1;
}

.plan-capacity li span {
  min-width: 0;
  color: #a9b0b8;
  font-size: 9px;
  line-height: 1.35;
}

.plan-features-title {
  margin: 0 0 14px;
  color: #f3f5f8;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 780;
}

.plan-features {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.plan-features li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: #bfc0c8;
  font-size: 10px;
  line-height: 1.4;
}

.plan-features .icon {
  width: 14px;
  height: 14px;
  color: var(--plan-accent);
}

/* Destaca "Automatizar contenido en redes sociales" frente al resto de la
   lista (icono/color siguen el acento propio de cada plan vía
   .plan-features .icon de arriba); .plan-feature-locked es la versión
   equivalente pero apagada/con candado que ve el plan Starter, que no
   incluye Automatizar. */
.plan-feature-highlight {
  padding: 6px 8px;
  margin: -2px -8px 4px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 45%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--plan-accent) 14%, transparent);
  color: #fff;
  font-weight: 800;
}

.plan-feature-locked {
  padding: 6px 8px;
  margin: -2px -8px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: #7d818c;
}

.plan-feature-locked .icon {
  color: #6b7280;
}

.plan-feature-locked small {
  display: block;
  margin-top: 2px;
  color: #5b5f68;
  font-size: 8px;
}

.plans-footnote {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #6f707b;
  font-size: 8px;
}

.plans-footnote .icon {
  width: 13px;
  height: 13px;
}

/* --- Estado del plan pagado ------------------------------------------------ */
.plan-subscription-status {
  margin: 0 0 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(25, 217, 255, .28);
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(25, 217, 255, .08), rgba(116, 87, 255, .06));
}

.plan-subscription-status[hidden] {
  display: none;
}

.plan-subscription-status[data-state="expired"] {
  border-color: rgba(255, 155, 61, .32);
  background: rgba(255, 155, 61, .06);
}

.plan-subscription-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vid-cyan);
  box-shadow: 0 0 0 4px rgba(25, 217, 255, .16);
}

.plan-subscription-status[data-state="expired"] .plan-subscription-dot {
  background: var(--vid-orange);
  box-shadow: 0 0 0 4px rgba(255, 155, 61, .16);
}

.plan-subscription-status p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: #aeb6c0;
  font-size: 10px;
}

.plan-subscription-status strong {
  color: #fff;
  font-size: 12px;
}

/* --- Checkout de planes ---------------------------------------------------- */
html.checkout-open,
html.checkout-open body {
  overflow: hidden;
}

.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.checkout-overlay[hidden] {
  display: none;
}

.checkout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 8, .78);
  backdrop-filter: blur(6px);
  animation: checkout-fade 180ms ease;
}

.checkout-dialog {
  position: relative;
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  overflow: hidden;
  color: #fff;
  border: 1px solid #34353e;
  border-radius: 12px;
  background: #101117;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  animation: checkout-rise 220ms cubic-bezier(.2, .72, .2, 1);
}

.checkout-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

@keyframes checkout-fade {
  from { opacity: 0; }
}

@keyframes checkout-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

.checkout-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #aeb6c0;
  border: 1px solid #2c2d36;
  border-radius: 50%;
  background: #16171e;
  cursor: pointer;
}

.checkout-close:hover,
.checkout-close:focus-visible {
  color: #fff;
  border-color: #555761;
  outline: none;
}

.checkout-close .icon {
  width: 13px;
  height: 13px;
}

.checkout-summary {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid #24252d;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(116, 87, 255, .16), transparent 60%),
    #0c0d12;
}

.checkout-eyebrow {
  margin: 0;
  color: #7c7e8a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.checkout-summary h2 {
  margin: -8px 0 0;
  font-size: 24px;
  line-height: 1.1;
}

.checkout-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.checkout-price strong {
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.02em;
}

.checkout-price span {
  color: #8d8f9a;
  font-size: 10px;
}

.checkout-lines {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.checkout-lines li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.checkout-lines .icon,
.checkout-lines .credit-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 6px;
  color: var(--vid-cyan);
  border: 1px solid #262731;
  border-radius: 8px;
  background: #15161d;
}

.checkout-lines .credit-icon {
  padding: 4px;
  object-fit: contain;
}

.checkout-lines span {
  display: grid;
  gap: 2px;
}

.checkout-lines strong {
  font-size: 12px;
}

.checkout-lines small {
  color: #8d8f9a;
  font-size: 9.5px;
}

.checkout-totals {
  margin: 0;
  padding-top: 14px;
  display: grid;
  gap: 8px;
  border-top: 1px dashed #2c2d36;
}

.checkout-totals div {
  display: flex;
  justify-content: space-between;
  color: #aeb6c0;
  font-size: 10.5px;
}

.checkout-totals dd {
  margin: 0;
}

.checkout-totals .checkout-total {
  padding-top: 8px;
  color: #fff;
  border-top: 1px solid #24252d;
  font-size: 13px;
  font-weight: 800;
}

.checkout-expiry-note {
  margin: auto 0 0;
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  color: #c9ccd3;
  border: 1px solid rgba(255, 155, 61, .24);
  border-radius: 8px;
  background: rgba(255, 155, 61, .06);
  font-size: 9.5px;
  line-height: 1.45;
}

.checkout-expiry-note .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--vid-orange);
}

.checkout-main {
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-sandbox {
  padding: 12px;
  border: 1px dashed rgba(201, 255, 61, .38);
  border-radius: 8px;
  background: rgba(201, 255, 61, .045);
}

.checkout-sandbox[hidden] {
  display: none;
}

.checkout-sandbox p {
  margin: 0 30px 10px 0;
  color: #c9ccd3;
  font-size: 9.5px;
  line-height: 1.45;
}

.checkout-sandbox strong {
  color: var(--vid-lime);
}

.checkout-test-cards {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
}

.checkout-test-cards li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: #aeb6c0;
  font-size: 9.5px;
}

.checkout-test-cards code {
  color: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  user-select: all;
}

.checkout-form {
  display: grid;
  gap: 12px;
}

.checkout-form[hidden] {
  display: none;
}

.checkout-form h3 {
  margin: 0;
  font-size: 14px;
}

.checkout-payment-element {
  min-height: 120px;
}

.checkout-element-loading {
  min-height: 120px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #7c7e8a;
  border: 1px dashed #2c2d36;
  border-radius: 8px;
  font-size: 10px;
}

.checkout-element-loading span {
  width: 14px;
  height: 14px;
  border: 2px solid #2f3039;
  border-top-color: var(--vid-cyan);
  border-radius: 50%;
  animation: checkout-spin 700ms linear infinite;
}

.checkout-error {
  margin: 0;
  padding: 9px 11px;
  color: #ffd1dc;
  border: 1px solid rgba(255, 71, 126, .38);
  border-radius: 7px;
  background: rgba(255, 71, 126, .08);
  font-size: 10px;
  line-height: 1.45;
}

.checkout-error[hidden] {
  display: none;
}

.checkout-pay {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
  box-shadow: 0 12px 30px rgba(116, 87, 255, .22);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.checkout-pay .icon {
  width: 14px;
  height: 14px;
}

.checkout-pay:hover,
.checkout-pay:focus-visible {
  filter: brightness(1.1);
  outline: none;
}

.checkout-pay:focus-visible {
  box-shadow: 0 0 0 2px #101117, 0 0 0 4px var(--vid-coral);
}

.checkout-pay:disabled {
  cursor: progress;
  filter: saturate(.7) brightness(.9);
}

.checkout-pay.is-busy .icon {
  display: none;
}

.checkout-pay.is-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: checkout-spin 700ms linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

.checkout-secure,
.checkout-legal {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7c7e8a;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

.checkout-secure .icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--vid-lime);
}

.checkout-legal {
  margin-top: -6px;
  display: block;
}

.checkout-legal button {
  padding: 0;
  color: #c9ccd3;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.checkout-success {
  margin: auto 0;
  padding: 20px 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.checkout-success[hidden] {
  display: none;
}

.checkout-success-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #0b0b10;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vid-lime), var(--vid-cyan));
  box-shadow: 0 0 0 8px rgba(201, 255, 61, .1);
  animation: checkout-rise 260ms cubic-bezier(.2, .72, .2, 1);
}

.checkout-success-icon .icon {
  width: 26px;
  height: 26px;
}

.checkout-success h3 {
  margin: 6px 0 0;
  font-size: 20px;
}

.checkout-success p {
  max-width: 330px;
  margin: 0;
  color: #aeb6c0;
  font-size: 11px;
  line-height: 1.5;
}

.checkout-success .checkout-receipt {
  color: #7c7e8a;
  font-size: 9px;
}

.checkout-receipt code {
  color: #c9ccd3;
  font-size: 9px;
}

.checkout-success .checkout-pay {
  max-width: 260px;
  margin-top: 8px;
}

@media (max-width: 760px) {
  .checkout-overlay {
    place-items: start center;
    padding: 12px;
  }

  .checkout-dialog {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    padding: 24px 18px 18px;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid #24252d;
  }

  .checkout-price strong {
    font-size: 30px;
  }

  .checkout-main {
    padding: 18px 18px 22px;
  }

  .checkout-expiry-note {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-backdrop,
  .checkout-dialog,
  .checkout-success-icon {
    animation: none;
  }
}

.motion-gallery {
  margin-top: 28px;
  padding: 18px 0 20px;
  border-top: 1px solid #24252d;
  border-bottom: 1px solid #24252d;
}

.motion-carousel {
  --motion-card-width: 210px;
  --motion-card-offset: 245px;
  --motion-card-far-offset: 425px;
  --motion-drag-offset: 0px;
  min-width: 0;
  padding-top: 14px;
  overflow: hidden;
}

.motion-carousel-stage {
  position: relative;
  height: 385px;
  perspective: 1100px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.motion-carousel-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--motion-card-width);
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  color: #fff;
  border: 1px solid #3a3b44;
  border-radius: 7px;
  background: #101117;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .38);
  cursor: grab;
  opacity: .55;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 1700ms cubic-bezier(.2, .72, .2, 1), opacity 1200ms ease, border-color 1200ms ease, box-shadow 1200ms ease;
}

.motion-carousel-slide.is-active {
  z-index: 3;
  opacity: 1;
  cursor: pointer;
  border-color: #666873;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  transform: translate3d(calc(-50% + var(--motion-drag-offset)), 0, 48px) rotateY(0deg) scale(1);
}

.motion-carousel-gallery-link {
  position: absolute;
  z-index: 5;
  top: calc(var(--motion-card-width) * 16 / 9 - 54px);
  left: 50%;
  width: calc(var(--motion-card-width) - 2px);
  height: 54px;
  padding: 22px 12px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: transparent;
  transform: translateX(-50%) translateZ(96px);
  pointer-events: auto;
}

.motion-carousel-gallery-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .78) 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.motion-carousel-gallery-link span {
  position: relative;
  z-index: 1;
  color: #fff;
  opacity: 0;
  transition: opacity 200ms ease, text-shadow 200ms ease;
}

.motion-carousel-slide.is-active:hover ~ .motion-carousel-gallery-link,
.motion-carousel-slide.is-active:focus-visible ~ .motion-carousel-gallery-link,
.motion-carousel-gallery-link:hover,
.motion-carousel-gallery-link:focus-visible {
  color: transparent;
}

.motion-carousel-slide.is-active:hover ~ .motion-carousel-gallery-link::before,
.motion-carousel-slide.is-active:focus-visible ~ .motion-carousel-gallery-link::before,
.motion-carousel-slide.is-active:hover ~ .motion-carousel-gallery-link span,
.motion-carousel-slide.is-active:focus-visible ~ .motion-carousel-gallery-link span,
.motion-carousel-gallery-link:hover::before,
.motion-carousel-gallery-link:focus-visible::before,
.motion-carousel-gallery-link:hover span,
.motion-carousel-gallery-link:focus-visible span {
  opacity: 1;
}

.motion-carousel-gallery-link:hover span,
.motion-carousel-gallery-link:focus-visible span {
  outline: none;
  text-shadow: 0 0 6px #fff, 0 0 14px rgba(67, 157, 255, .92);
}

.motion-carousel-slide.is-prev {
  z-index: 2;
  transform: translate3d(calc(-50% - var(--motion-card-offset) + var(--motion-drag-offset)), 20px, -90px) rotateY(14deg) scale(.86);
}

.motion-carousel-slide.is-next {
  z-index: 2;
  transform: translate3d(calc(-50% + var(--motion-card-offset) + var(--motion-drag-offset)), 20px, -90px) rotateY(-14deg) scale(.86);
}

.motion-carousel-slide.is-prev-2 {
  z-index: 1;
  opacity: .32;
  transform: translate3d(calc(-50% - var(--motion-card-far-offset) + var(--motion-drag-offset)), 38px, -180px) rotateY(18deg) scale(.72);
}

.motion-carousel-slide.is-next-2 {
  z-index: 1;
  opacity: .32;
  transform: translate3d(calc(-50% + var(--motion-card-far-offset) + var(--motion-drag-offset)), 38px, -180px) rotateY(-18deg) scale(.72);
}

.motion-carousel-slide.is-prev-far {
  z-index: 0;
  opacity: .2;
  transform: translate3d(calc(-50% - var(--motion-card-far-offset) - 180px + var(--motion-drag-offset)), 48px, -240px) rotateY(20deg) scale(.62);
}

.motion-carousel-slide.is-next-far {
  z-index: 0;
  opacity: .2;
  transform: translate3d(calc(-50% + var(--motion-card-far-offset) + 180px + var(--motion-drag-offset)), 48px, -240px) rotateY(-20deg) scale(.62);
}

.motion-carousel-slide.is-hidden {
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 54px, -280px) scale(.55);
}

.motion-carousel-stage.is-dragging,
.motion-carousel-stage.is-dragging .motion-carousel-slide {
  cursor: grabbing;
}

.motion-carousel-stage.is-dragging .motion-carousel-slide {
  transition: none;
}

.motion-carousel-slide:focus-visible {
  outline: 2px solid var(--vid-cyan);
  outline-offset: 3px;
}

.motion-carousel-slide video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  transition: filter 1000ms ease;
}

.motion-carousel-slide:not(.is-active) video {
  filter: brightness(.7) saturate(.72);
}

.motion-carousel-dots {
  height: 18px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.motion-carousel-dots button {
  width: 18px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #393a43;
  cursor: pointer;
  transition: width 450ms ease, background 450ms ease;
}

.motion-carousel-dots button.active {
  width: 34px;
  background: #d8d9df;
}

@media (max-width: 1180px) {
  .motion-carousel {
    --motion-card-offset: 200px;
    --motion-card-far-offset: 350px;
  }
}

@media (max-width: 620px) {
  .motion-gallery {
    margin-top: 24px;
    padding-top: 15px;
  }

  .motion-carousel {
    --motion-card-width: 174px;
    --motion-card-offset: 150px;
    --motion-card-far-offset: 285px;
  }

  .motion-carousel-stage {
    height: 318px;
  }

  .motion-carousel-slide.is-prev,
  .motion-carousel-slide.is-next {
    opacity: .42;
  }

  .motion-carousel-slide.is-prev-2,
  .motion-carousel-slide.is-next-2,
  .motion-carousel-slide.is-prev-far,
  .motion-carousel-slide.is-next-far {
    opacity: 0;
    pointer-events: none;
  }
}

/* Credit pricing */
.credit-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(83, 198, 255, .42));
}

.sidebar-credits .credit-icon,
.dashboard-credit-pill .credit-icon {
  width: 20px;
  height: 20px;
}

.plans-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.plan-card {
  min-height: 535px;
}

.plan-card-starter {
  --plan-accent: #39b6ff;
}

.plan-card-creator {
  --plan-accent: #10b981;
}

.plan-card-featured {
  --plan-accent: #77d9ff;
  border-color: rgba(91, 190, 255, .52);
  background: linear-gradient(180deg, rgba(39, 144, 255, .1), #13141a 38%);
}

.plan-card-ultra {
  --plan-accent: #e9bd55;
  border-color: rgba(255, 211, 103, .9);
  background: linear-gradient(180deg, rgba(188, 131, 25, .11), #15140f 38%);
  box-shadow:
    0 0 0 1px rgba(255, 218, 126, .28),
    0 0 16px rgba(244, 193, 74, .26),
    0 0 34px rgba(218, 164, 45, .14),
    0 22px 55px rgba(0, 0, 0, .25);
}

.plan-card-ultra::before {
  box-shadow: 0 0 15px rgba(246, 203, 102, .56);
}

.plan-card-ultra::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(255, 222, 137, .78);
  border-radius: inherit;
  box-shadow:
    inset 0 0 10px rgba(255, 214, 112, .18),
    inset 0 0 2px rgba(255, 244, 206, .38);
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.plan-card-ultra:hover {
  border-color: #ffe09a;
  box-shadow:
    0 0 0 1px rgba(255, 232, 169, .5),
    0 0 18px rgba(255, 211, 105, .42),
    0 0 40px rgba(238, 186, 66, .28),
    0 24px 62px rgba(0, 0, 0, .3);
}

.plan-card-ultra:hover::after {
  border-color: rgba(255, 239, 191, .98);
  box-shadow:
    inset 0 0 14px rgba(255, 218, 125, .3),
    inset 0 0 3px rgba(255, 250, 229, .62);
}

.plan-card-ultra .plan-title-row h2,
.plan-card-ultra .plan-price-row strong {
  text-shadow: 0 0 13px rgba(242, 194, 83, .22);
}

.plan-card-ultra .plan-action {
  border-color: rgba(239, 194, 91, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 213, .14),
    0 0 18px rgba(222, 165, 43, .16),
    0 9px 24px rgba(0, 0, 0, .24);
}

.plan-card-ultra .plan-action:hover,
.plan-card-ultra .plan-action:focus-visible {
  border-color: #f9d77f;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 222, .2),
    0 0 24px rgba(246, 199, 91, .34),
    0 10px 28px rgba(0, 0, 0, .28);
}

.plan-card-ultra .credit-icon {
  filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(354deg) brightness(1.12)
    drop-shadow(0 0 7px rgba(239, 191, 76, .55));
}

.plan-ultra-badge {
  color: #ffdc88;
  border-color: rgba(236, 190, 82, .48);
  background: rgba(187, 128, 18, .13);
  box-shadow: 0 0 13px rgba(232, 181, 64, .13);
}

.plan-credit-icon {
  width: 30px;
  height: 30px;
}

.segmented label > span {
  position: relative;
}

.segmented .option-credit-badge {
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: auto;
  height: 14px;
  min-width: 25px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #8fa7c0;
  border: 1px solid rgba(99, 142, 187, .24);
  border-radius: 999px;
  background: rgba(8, 13, 20, .78);
  font-size: 7px;
  line-height: 1;
  pointer-events: none;
}

.segmented .option-credit-badge .credit-icon {
  width: 9px;
  height: 9px;
}

.segmented .option-credit-badge b {
  font: inherit;
  font-weight: 850;
}

.segmented input:checked + span .option-credit-badge {
  color: #cceaff;
  border-color: rgba(102, 184, 255, .42);
  background: rgba(8, 31, 58, .86);
}

.field-credit-note {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #75bffb;
  font-size: 8px;
  font-weight: 750;
  vertical-align: middle;
}

.field-credit-note .credit-icon {
  width: 11px;
  height: 11px;
}

.generation-credit-summary {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #2d3743;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(27, 35, 44, .95), rgba(10, 13, 17, .98));
  box-shadow: 0 13px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.generation-credit-heading,
.generation-credit-total,
.generation-credit-lines > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.generation-credit-heading {
  min-height: 39px;
  padding: 0 13px;
  border-bottom: 1px solid #28313b;
}

.generation-credit-heading strong {
  color: #e7edf3;
  font-size: 10px;
}

.generation-credit-lines {
  padding: 5px 13px;
}

.generation-credit-lines > div {
  min-height: 33px;
}

.generation-credit-lines > div > span:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.generation-credit-lines strong {
  color: #bfc7d0;
  font-size: 9px;
}

.generation-credit-lines small {
  overflow: hidden;
  color: #727d89;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-credit-value,
.generation-credit-total > strong,
.button-credit-total,
.project-credit-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.generation-credit-value {
  flex: 0 0 auto;
  color: #b8dfff;
  font-size: 9px;
}

.generation-credit-value .credit-icon {
  width: 13px;
  height: 13px;
}

.generation-credit-value b,
.generation-credit-total b,
.button-credit-total b {
  font: inherit;
  font-weight: 850;
}

.generation-credit-total {
  min-height: 48px;
  padding: 0 13px;
  border-top: 1px solid #303b48;
  background: rgba(33, 102, 170, .11);
}

.generation-credit-total > span {
  color: #f0f5f9;
  font-size: 11px;
  font-weight: 800;
}

.generation-credit-total > strong {
  color: #f5fbff;
  font-size: 14px;
}

.generation-credit-total > strong .credit-icon {
  width: 20px;
  height: 20px;
}

.generation-credit-total > strong > span {
  color: #8d9aa7;
  font-size: 8px;
}

.generate-button .button-idle {
  width: 100%;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.generate-action-label {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button-credit-total {
  min-width: 43px;
  height: 25px;
  padding: 0 7px 0 5px;
  justify-content: center;
  border: 1px solid rgba(166, 220, 255, .34);
  border-radius: 999px;
  color: #fff;
  background: rgba(2, 31, 61, .48);
  font-size: 10px;
}

.button-credit-total .credit-icon {
  width: 15px;
  height: 15px;
}

.credit-button-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 850ms linear infinite;
}

.mode-generate > .button-idle {
  display: grid;
}

.mode-generate > .button-processing {
  display: none;
}

.mode-generate.processing > .button-idle {
  display: none;
}

.mode-generate.processing > .button-processing {
  display: flex;
}

.project-credit-cost {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  min-height: 22px;
  padding: 3px 7px 3px 4px;
  color: #e9f7ff;
  border: 1px solid rgba(127, 197, 255, .3);
  border-radius: 999px;
  background: rgba(4, 16, 29, .82);
  font-size: 8px;
  font-weight: 850;
}

.project-thumbnail .project-credit-cost img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(83, 198, 255, .45));
  transition: none;
}

.project-card:hover .project-thumbnail .project-credit-cost img {
  transform: none;
  filter: drop-shadow(0 0 5px rgba(83, 198, 255, .58));
}

@media (max-width: 980px) {
  /* Con 4 tarjetas (antes 3), 2 columnas ya reparte todo en un 2x2 limpio;
     ya no hace falta que Ultra ocupe la fila entera como cuando sobraba una
     tarjeta suelta. */
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .plans-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .generation-credit-lines > div > span:first-child {
    display: grid;
    gap: 2px;
  }

  .generate-button {
    padding: 0 10px;
  }
}

@media (max-width: 400px) {
  .motion-carousel {
    --motion-card-width: 160px;
    --motion-card-offset: 130px;
    --motion-card-far-offset: 250px;
  }

  .motion-carousel-stage {
    height: 294px;
  }
}

.quick-create {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #30313a;
  border-radius: 8px;
  background: #101117;
}

.quick-create-media,
.quick-create-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.quick-create-media {
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.quick-create-overlay {
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(7, 8, 13, .34) 0%, rgba(7, 8, 13, .56) 55%, rgba(7, 8, 13, .82) 100%),
    linear-gradient(180deg, rgba(7, 8, 13, .16), rgba(7, 8, 13, .76));
}

.quick-create-content {
  position: relative;
  z-index: 1;
  min-height: 330px;
  padding: 36px clamp(28px, 5vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .sidebar-brand-name {
    --sidebar-brand-pointer-x: 50%;
    --sidebar-brand-pointer-y: 50%;
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(100deg, #fffef8 0%, #e7dfd2 18%, #ffffff 38%, #d1c9bd 58%, #fff9ea 78%, #e5ddd1 100%);
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 11px rgba(255, 247, 226, .3));
    animation: quick-create-watermark-gradient 12s ease-in-out infinite;
  }

  .theme-graphite .sidebar-brand .sidebar-brand-name > span {
    color: transparent;
  }

  .sidebar-brand-name::after {
    content: attr(data-title);
    position: absolute;
    inset: 0;
    color: transparent;
    background:
      radial-gradient(
        ellipse 54px 34px at var(--sidebar-brand-pointer-x) var(--sidebar-brand-pointer-y),
        #ffffff 0%,
        #fff8e8 20%,
        #eadfcd 40%,
        #fffdf7 58%,
        #cfc5b6 70%,
        transparent 80%
      );
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 0;
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 251, .98))
      drop-shadow(0 0 9px rgba(255, 244, 215, .88))
      drop-shadow(0 0 19px rgba(226, 212, 188, .65));
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.theme-graphite .sidebar-brand:hover {
    text-shadow: none;
  }

  .sidebar-brand:hover .sidebar-brand-name::after {
    opacity: 1;
  }

  .desktop-neon-logo {
    --desktop-logo-pointer-x: 50%;
    --desktop-logo-pointer-y: 50%;
    position: relative;
    isolation: isolate;
  }

  .desktop-neon-logo .site-logo {
    opacity: .08;
  }

  .desktop-neon-logo::before,
  .desktop-neon-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: 0% 50%;
    background-size: 280% 100%;
    -webkit-mask: url("./assets/vidreum-logo.avif?v=brand-20260913a") center / contain no-repeat;
    mask: url("./assets/vidreum-logo.avif?v=brand-20260913a") center / contain no-repeat;
    pointer-events: none;
  }

  .desktop-neon-logo::before {
    background-image: linear-gradient(100deg, #fffef8 0%, #e7dfd2 18%, #ffffff 38%, #d1c9bd 58%, #fff9ea 78%, #e5ddd1 100%);
    filter: drop-shadow(0 0 8px rgba(255, 246, 222, .44));
    animation: quick-create-watermark-gradient 12s ease-in-out infinite;
  }

  .desktop-neon-logo::after {
    background-image:
      radial-gradient(
        circle 12px at var(--desktop-logo-pointer-x) var(--desktop-logo-pointer-y),
        #ffffff 0%,
        #fffbed 15%,
        #efe3cf 31%,
        #ffffff 49%,
        #ddd2c0 68%,
        #fff8e8 83%,
        transparent 100%
      );
    opacity: 0;
    filter:
      brightness(1.28)
      drop-shadow(0 0 2px #fffef8)
      drop-shadow(0 0 7px rgba(255, 247, 226, .98))
      drop-shadow(0 0 16px rgba(232, 218, 193, .82))
      drop-shadow(0 0 29px rgba(255, 250, 236, .55));
    transition: opacity 90ms ease;
  }

  .desktop-neon-logo:hover::after {
    opacity: 1;
  }

  body.theme-graphite .vae-brand .vae-brand-name > span {
    color: transparent;
  }

  .footer-brand-name {
    --footer-brand-pointer-x: 50%;
    --footer-brand-pointer-y: 50%;
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(100deg, #fffef8 0%, #e7dfd2 18%, #ffffff 38%, #d1c9bd 58%, #fff9ea 78%, #e5ddd1 100%);
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 11px rgba(255, 247, 226, .3));
    animation: quick-create-watermark-gradient 12s ease-in-out infinite;
  }

  .theme-graphite .site-footer-brand .footer-brand-name > span {
    color: transparent;
  }

  .footer-brand-name::after {
    content: attr(data-title);
    position: absolute;
    inset: 0;
    color: transparent;
    background:
      radial-gradient(
        ellipse 62px 38px at var(--footer-brand-pointer-x) var(--footer-brand-pointer-y),
        #ffffff 0%,
        #fff8e8 20%,
        #eadfcd 40%,
        #fffdf7 58%,
        #cfc5b6 70%,
        transparent 80%
      );
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 0;
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 251, .98))
      drop-shadow(0 0 10px rgba(255, 244, 215, .88))
      drop-shadow(0 0 20px rgba(226, 212, 188, .65));
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .site-footer-brand:hover .footer-brand-name::after {
    opacity: 1;
  }

  body.theme-graphite .desktop-neon-text {
    --desktop-neon-pointer-x: 50%;
    --desktop-neon-pointer-y: 50%;
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(100deg, #d9f3ff 0%, #00a8ff 18%, #245dff 38%, #863dff 58%, #007dff 78%, #7ee8ff 100%);
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 18px rgba(31, 128, 255, .22));
    animation: quick-create-watermark-gradient 12s ease-in-out infinite;
  }

  .desktop-neon-text::after {
    content: attr(data-title);
    position: absolute;
    inset: 0;
    color: transparent;
    background:
      radial-gradient(
        ellipse 115px 82px at var(--desktop-neon-pointer-x) var(--desktop-neon-pointer-y),
        #fff 0%,
        #b9f1ff 18%,
        #20b7ff 36%,
        #395cff 53%,
        #8c3dff 66%,
        transparent 76%
      );
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 0;
    filter:
      drop-shadow(0 0 4px rgba(225, 250, 255, .95))
      drop-shadow(0 0 12px rgba(0, 166, 255, .92))
      drop-shadow(0 0 25px rgba(84, 68, 255, .7));
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .desktop-neon-text:hover::after {
    opacity: 1;
  }

  /* "momentos." (portada de Clipping): degradado propio azul marino/negro/
     blanco en vez del multicolor (cian/violeta) del resto de textos neón. El
     brillo que sigue al puntero (::after) usa la misma paleta, en lugar del
     blanco/cian/violeta genérico. */
  body.theme-graphite .clipping-hero-copy .desktop-neon-text {
    background-image: linear-gradient(100deg, #000000 0%, #0a1a4d 16%, #1c3fae 34%, #ffffff 50%, #1c3fae 66%, #0a1a4d 84%, #000000 100%);
    filter: drop-shadow(0 0 18px rgba(20, 40, 110, .4));
  }

  /* Sin brillo al pasar el ratón: aquí no hace falta el ::after que lo pinta
     (el resto de textos neón de la web sí lo conservan). */
  .clipping-hero-copy .desktop-neon-text::after {
    content: none;
  }

  body.theme-graphite .brand-neon-text {
    background: linear-gradient(100deg, #fffef8 0%, #e7dfd2 18%, #ffffff 38%, #d1c9bd 58%, #fff9ea 78%, #e5ddd1 100%);
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
  }

  body.theme-graphite .brand-neon-text > span {
    color: transparent;
  }

  .brand-neon-text::after {
    background: radial-gradient(
      ellipse 115px 82px at var(--desktop-neon-pointer-x) var(--desktop-neon-pointer-y),
      #ffffff 0%,
      #fff8e8 20%,
      #eadfcd 40%,
      #fffdf7 58%,
      #cfc5b6 70%,
      transparent 80%
    );
    background-clip: text;
    -webkit-background-clip: text;
    filter:
      drop-shadow(0 0 4px rgba(255, 255, 251, .96))
      drop-shadow(0 0 12px rgba(255, 244, 215, .88))
      drop-shadow(0 0 26px rgba(226, 212, 188, .68));
  }

  body.theme-graphite .mode-studio-brand-name > span {
    color: transparent;
  }
}

@keyframes quick-create-watermark-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .sidebar-brand-name {
    animation: none;
    background-position: 50% 50%;
  }

  .sidebar-brand-name::after {
    transition: none;
  }

  .desktop-neon-logo::before {
    animation: none;
    background-position: 50% 50%;
  }

  .desktop-neon-logo::after {
    transition: none;
  }

  .footer-brand-name {
    animation: none;
    background-position: 50% 50%;
  }

  .footer-brand-name::after {
    transition: none;
  }

  .desktop-neon-text {
    animation: none !important;
    background-position: 50% 50% !important;
  }

  .desktop-neon-text::after {
    transition: none;
  }
}

.dashboard-section-heading > div > span {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.quick-create-copy {
  width: 100%;
  text-align: center;
}

.quick-create-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 4.3vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
}

.quick-create-actions {
  width: min(100%, 1040px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.quick-composer {
  width: 100%;
  min-height: 76px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto auto;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  background: rgba(12, 13, 19, .88);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}

.quick-tiktok-preview {
  position: relative;
  width: 100%;
  min-height: 132px;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 42px;
  align-items: stretch;
  overflow: hidden;
  color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(12, 13, 19, .94);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}

.quick-tiktok-preview[hidden] {
  display: none;
}

.quick-tiktok-preview.error {
  border-color: rgba(255, 102, 120, .7);
}

.quick-tiktok-preview-media {
  position: relative;
  min-width: 0;
  min-height: 130px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #090a0e;
}

.quick-tiktok-preview-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.quick-tiktok-preview-media img[hidden] {
  display: none;
}

.quick-tiktok-preview-placeholder {
  color: #777985;
}

.quick-tiktok-preview-placeholder .icon {
  width: 23px;
  height: 23px;
}

.quick-tiktok-preview.loading .quick-tiktok-preview-placeholder .icon {
  animation: previewPulse 1.1s ease-in-out infinite;
}

.quick-tiktok-preview.has-cover .quick-tiktok-preview-placeholder {
  display: none;
}

.quick-tiktok-preview-play {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  background: rgba(0, 0, 0, .7);
  transition: transform 160ms ease, background 160ms ease;
}

.quick-tiktok-preview.has-cover .quick-tiktok-preview-play {
  display: grid;
}

.quick-tiktok-preview-media:hover .quick-tiktok-preview-play,
.quick-tiktok-preview-media:focus-visible .quick-tiktok-preview-play {
  background: rgba(0, 0, 0, .88);
  transform: scale(1.06);
}

.quick-tiktok-preview-play .icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: currentColor;
}

.quick-tiktok-preview-copy {
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}

.quick-tiktok-preview-copy strong,
.quick-tiktok-preview-copy > span,
.quick-tiktok-preview-meta > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-tiktok-preview-copy strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.quick-tiktok-preview-copy > span {
  color: #8f919d;
  font-size: 11px;
  line-height: 1.3;
}

.quick-tiktok-preview-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a5a7b1;
  font-size: 10px;
  font-weight: 700;
}

.quick-tiktok-preview-badge {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 4px;
  background: #202129;
  font-size: 9px;
}

.quick-tiktok-preview-badge .icon {
  width: 10px;
  height: 10px;
}

.quick-tiktok-preview-clear {
  align-self: start;
  width: 34px;
  height: 34px;
  margin: 9px 7px 0 0;
  display: grid;
  place-items: center;
  color: #9a9ca7;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.quick-tiktok-preview-clear:hover,
.quick-tiktok-preview-clear:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.quick-tiktok-preview-clear .icon {
  width: 15px;
  height: 15px;
}

.quick-url {
  position: relative;
  min-width: 0;
  height: 58px;
}

.quick-url .icon {
  position: absolute;
  top: 19px;
  left: 16px;
  width: 20px;
  height: 20px;
  color: #8c8d98;
}

.quick-url input {
  width: 100%;
  height: 58px;
  padding: 0 18px 0 48px;
  color: #fff;
  border: 0;
  border-radius: 5px;
  outline: none;
  background: #1b1c23;
  font-size: 13px;
}

.quick-url input:focus {
  box-shadow: inset 0 0 0 1px var(--vid-cyan), 0 0 0 2px rgba(25, 217, 255, .1);
}

.quick-url input::placeholder {
  color: #7d7e89;
}

.quick-upload,
.quick-launch {
  height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.quick-upload {
  max-width: 180px;
  color: #d0d1d8;
  border: 1px solid #373842;
  background: #1b1c23;
}

.quick-upload span {
  max-width: 124px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-upload .icon,
.quick-launch .icon {
  width: 18px;
  height: 18px;
}

.quick-launch {
  min-width: 154px;
  color: #fff;
  border: 0;
  background: linear-gradient(105deg, var(--vid-cyan), var(--vid-violet) 36%, var(--vid-coral) 70%, var(--vid-orange));
  background-size: 170% 100%;
  box-shadow: 0 8px 22px rgba(116, 87, 255, .22);
  transition: background-position 220ms ease;
}

.quick-launch:hover {
  background-position: 100% 0;
}

.dashboard-tools,
.dashboard-projects {
  padding-top: 34px;
}

.dashboard-section-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.dashboard-section-heading h2 {
  margin: 5px 0 0;
  font-size: 18px;
}

.dashboard-section-heading p {
  margin: 0;
  color: #a9aab4;
  font-size: 11px;
  font-weight: 600;
}

.tools-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(126px, 1fr));
  gap: 11px;
}

.dashboard-tool {
  min-width: 0;
  min-height: 108px;
  padding: 13px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
  color: #fff;
  border: 1px solid #292a32;
  border-radius: 7px;
  background: #121319;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.dashboard-tool:hover {
  border-color: #4b4c57;
  background: #17181f;
  transform: translateY(-2px);
}

.tool-icon {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .11);
}

.tool-icon .icon {
  width: 20px;
  height: 20px;
}

.tool-coral { background: linear-gradient(135deg, var(--vid-violet), var(--vid-coral), var(--vid-orange)); }
.tool-cyan { background: linear-gradient(135deg, #087b96, var(--vid-cyan), #6e63ff); }
.tool-orange { background: linear-gradient(135deg, #8b2d12, var(--vid-orange), #ffd04a); }
.tool-lime { color: #172007; background: linear-gradient(135deg, #62a020, var(--vid-lime), var(--vid-cyan)); }
.tool-violet { background: linear-gradient(135deg, #4221ad, var(--vid-violet), var(--vid-coral)); }

.dashboard-tool strong {
  min-width: 0;
  align-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.dashboard-tool small {
  align-self: start;
  color: #7f808b;
  font-size: 8px;
}

.projects-heading {
  align-items: center;
}

/* Mismo aspecto que el botón "Automatizar" de /automatizar.html (allí es
   .primary-button, con el degradado azul claro que define la regla
   .automation-body ... .primary-button). Lleva al calendario con la ventana
   de programar publicaciones ya abierta, vía ?schedule=new. */
.projects-automate-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 19px;
  color: #fff;
  border: 1px solid rgba(119, 190, 255, .72);
  border-radius: 9px;
  background: linear-gradient(180deg, #4ea8ff, #168cff 48%, #0872db);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .42), inset 0 -5px 10px rgba(0, 48, 105, .3), 0 8px 22px rgba(0, 0, 0, .38);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}

.projects-automate-button:hover,
.projects-automate-button:focus-visible {
  border-color: rgba(255, 255, 255, .82);
  background: linear-gradient(180deg, #4e76a7, #345889);
}

.projects-automate-button .icon {
  width: 17px;
  height: 17px;
}

.project-tabs {
  height: 32px;
  padding: 3px;
  display: flex;
  gap: 3px;
  border: 1px solid #2d2e36;
  border-radius: 5px;
  background: #111218;
}

.project-tabs button {
  padding: 0 11px;
  border: 0;
  border-radius: 3px;
  color: #73747f;
  background: transparent;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.project-tabs button.active {
  color: #fff;
  background: #292a32;
}

.projects-media-groups {
  display: grid;
  gap: 28px;
}

.projects-media-group-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
}

.project-card-shell {
  position: relative;
  min-width: 0;
}

.project-card {
  width: 100%;
  min-width: 0;
  padding: 0;
  display: block;
  color: #fff;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.project-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #2e2f37;
  border-radius: 7px;
  background: #14151b;
}

.project-thumbnail.is-vertical-video {
  aspect-ratio: 16 / 9;
  background: #050607;
}

.project-thumbnail img,
.project-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease, filter 240ms ease;
}

.project-thumbnail.is-vertical-video img,
.project-thumbnail.is-vertical-video video {
  object-fit: contain;
  background: #050607;
}

.project-thumbnail img.project-cover-image {
  object-fit: contain;
  background: #050607;
}

.project-card:hover .project-thumbnail img,
.project-card:hover .project-thumbnail video {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.04);
}

.project-card:hover .project-thumbnail.is-vertical-video img,
.project-card:hover .project-thumbnail.is-vertical-video video {
  transform: none;
}

.project-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(4, 5, 9, .74));
}

.project-type,
.project-duration {
  position: absolute;
  z-index: 2;
  bottom: 9px;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 7px;
  font-weight: 800;
}

.project-type {
  left: 9px;
  color: #fff;
  background: linear-gradient(105deg, var(--vid-violet), var(--vid-coral), var(--vid-orange));
}

.project-duration {
  right: 9px;
  color: #d9dae1;
  background: rgba(8, 9, 13, .74);
}

.project-editor-action {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  min-height: 24px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  border: 1px solid rgba(119, 180, 255, .52);
  border-radius: 5px;
  background: linear-gradient(145deg, #174f98, #092b63);
  box-shadow: 0 7px 18px rgba(0, 42, 105, .38), inset 0 1px rgba(255, 255, 255, .2);
  font-size: 8px;
  font-weight: 800;
}

.project-editor-action .icon {
  width: 12px;
  height: 12px;
}

.project-card:hover .project-editor-action,
.project-card:focus-visible .project-editor-action {
  border-color: rgba(209, 231, 255, .92);
  background: linear-gradient(145deg, #2166be, #0b377c);
  box-shadow: 0 0 18px rgba(92, 167, 255, .48), inset 0 1px rgba(255, 255, 255, .28);
  text-shadow: 0 0 7px rgba(255, 255, 255, .72);
}

/* Proyectos de clipping que siguen trabajando: permanecen visibles y no bloquean el estudio. */
.project-card.is-clipping-job .project-thumbnail::after {
  background: linear-gradient(180deg, rgba(4, 9, 12, .08), rgba(2, 15, 12, .82));
}

.project-card.is-clipping-job .project-type,
.project-card.is-clipping-job .project-duration {
  top: 9px;
  bottom: auto;
  z-index: 4;
}

.clipping-project-progress {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: auto;
  min-height: 0;
  padding: 18px 14px 15px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: end;
  color: #d8ffec;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(2, 37, 24, .92) 0%, rgba(4, 83, 49, .84) 46%, rgba(8, 167, 94, .72) 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 255, 188, .56), inset 0 1px rgba(232, 255, 243, .17);
  text-align: center;
}

.clipping-project-progress-indicator {
  width: 16px;
  height: 16px;
  align-self: end;
  margin-bottom: 8px;
  display: block;
  border: 2px solid #4ef0b0;
  border-top-color: rgba(78, 240, 176, .24);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(78, 240, 176, .64);
  animation: clipping-project-spin .9s linear infinite;
}

.clipping-project-progress-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-self: end;
  padding-bottom: 4px;
}

.clipping-project-progress-copy strong,
.clipping-project-progress-copy small,
.clipping-project-progress-phase {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clipping-project-progress-value {
  color: #d8ffec;
  font-size: clamp(32px, 8vw, 54px);
  font-weight: 950;
  line-height: .82;
  letter-spacing: -.07em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .42), 0 0 20px rgba(158, 255, 205, .42);
}

.clipping-project-progress-phase { color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .025em; }

.clipping-project-progress-copy small {
  color: rgba(224, 255, 238, .84);
  font-size: 9px;
  font-weight: 750;
}

.clipping-project-progress-track {
  grid-column: 1 / -1;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(189, 255, 220, .18);
}

.clipping-project-progress-track > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #32d18e, #7effc5);
  box-shadow: 0 0 9px rgba(102, 255, 190, .78);
  transition: width .45s ease;
}

.clipping-project-progress.is-failed {
  color: #ffd9de;
  border-color: rgba(255, 111, 129, .82);
  background: linear-gradient(135deg, rgba(80, 22, 34, .97), rgba(39, 13, 20, .97));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 82, 111, .18);
}

.clipping-project-progress.is-failed .clipping-project-progress-indicator {
  border-color: #ff8191;
  border-top-color: #ff8191;
  animation: none;
}

.clipping-project-progress.is-failed .clipping-project-progress-copy strong { color: #ffe4e8; }
.clipping-project-progress.is-failed .clipping-project-progress-copy small { color: rgba(255, 213, 220, .77); }

@keyframes clipping-project-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .clipping-project-progress-indicator { animation: none; }
  .clipping-project-progress-track > span { transition: none; }
}

.project-card > strong,
.project-card > span {
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card > strong {
  margin-top: 10px;
  font-size: 13px;
}

.project-card > span {
  margin-top: 4px;
  color: #9aa2b0;
  font-size: 11px;
}

.project-card-quick-edit {
  width: 100%;
  min-height: 30px;
  margin-top: 7px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #aeb2bb;
  border: 1px solid #292c33;
  border-radius: 6px;
  background: #101216;
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}

.project-card-quick-edit .icon {
  width: 12px;
  height: 12px;
}

.project-card-quick-edit:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .48);
  background: #191c22;
  box-shadow: 0 0 12px rgba(255, 255, 255, .12);
}
.project-card-delete { position: absolute; z-index: 5; right: 0; bottom: 0; width: 29px; height: 29px; display: grid; place-items: center; color: #9da6b3; border: 1px solid #303743; border-radius: 6px; background: #12161d; cursor: pointer; transition: .16s ease; }.project-card-delete .icon { width: 14px; height: 14px; }.project-card-delete:hover, .project-card-delete:focus-visible { color: #fff; border-color: #ff6c81; background: #5c1e2a; box-shadow: 0 0 14px rgba(255,82,111,.28); }

/* Menú de opciones (tres puntos) de las tarjetas de proyecto */
.project-card-menu {
  position: relative;
  margin-top: 7px;
  display: flex;
  justify-content: flex-end;
}

.project-card-menu-button {
  width: 32px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #aeb2bb;
  border: 1px solid #292c33;
  border-radius: 6px;
  background: #101216;
  cursor: pointer;
}

.project-card-menu-button .icon {
  width: 15px;
  height: 15px;
}

.project-card-menu-button:hover,
.project-card-menu-button[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .48);
  background: #191c22;
  box-shadow: 0 0 12px rgba(255, 255, 255, .12);
}

.project-card-menu-list {
  position: absolute;
  z-index: 24;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 174px;
  max-width: calc(100vw - 32px);
  padding: 5px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(119, 154, 207, .26);
  border-radius: 7px;
  background: linear-gradient(145deg, #12161d, #090b10);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

.project-card-menu-list[hidden] {
  display: none;
}

.project-card-menu.is-completed-clipping .project-card-menu-list {
  min-width: 244px;
}

/* En clips ya terminados los tres puntos viven dentro de la miniatura. La
   tarjeta abre los clips, así que no se muestra una segunda acción arriba. */
.project-card-shell > .project-card-menu.is-completed-clipping {
  position: absolute;
  z-index: 30;
  top: 9px;
  right: 9px;
  bottom: auto;
  left: auto;
  margin: 0;
  display: block;
}

.project-card-menu.is-completed-clipping .project-card-menu-button {
  border-color: rgba(199, 221, 255, .54);
  background: rgba(8, 15, 27, .86);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .36);
}

.project-card-menu.is-completed-clipping .project-card-menu-list {
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: auto;
}

.project-card-menu-item {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c6cbd6;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 9px;
  font-weight: 750;
}

.project-card-menu-item .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.project-card-menu-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-menu-item-suffix {
  margin-left: auto;
  padding-left: 8px;
  color: #9198a7;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
}

.project-card-menu-item:hover {
  color: #fff;
  background: #1a2230;
}

.project-card-menu-item.is-danger {
  margin-top: 2px;
  color: #ff9eaa;
  border: 1px solid rgba(210, 74, 94, .38);
  background: rgba(113, 30, 43, .22);
}

.project-card-menu-item.is-danger:hover {
  color: #ffd0d5;
  border-color: rgba(255, 113, 135, .72);
  background: #4a1d27;
}

.project-empty {
  grid-column: 1 / -1;
  min-height: 72px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px dashed #30313a;
  border-radius: 7px;
  color: #777883;
  text-align: center;
  font-size: 9px;
}

.project-empty-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #72aaff;
  border: 1px solid rgba(83, 145, 238, .28);
  border-radius: 8px;
  background: rgba(44, 105, 198, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 16px rgba(38, 113, 224, .1);
}

.project-empty-icon .icon {
  width: 16px;
  height: 16px;
}

.project-empty-button {
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #eef6ff;
  border: 1px solid rgba(91, 157, 255, .5);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(28, 100, 204, .84), rgba(56, 86, 202, .78));
  box-shadow: 0 7px 18px rgba(16, 73, 163, .2);
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.project-empty-button .icon {
  width: 13px;
  height: 13px;
}

.project-empty-button:hover,
.project-empty-button:focus-visible {
  color: #fff;
  border-color: #88bdff;
  outline: none;
  background: linear-gradient(135deg, #2277e7, #536be4);
  box-shadow: 0 0 0 1px rgba(117, 183, 255, .18), 0 8px 22px rgba(25, 101, 214, .36);
  transform: translateY(-1px);
}

.editor-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-back-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #55555f;
  border: 1px solid #d8d8de;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.editor-back-button:hover {
  color: #fff;
  border-color: var(--vid-violet);
  background: linear-gradient(135deg, var(--vid-violet), var(--vid-coral));
}

@media (max-width: 1180px) {
  .dashboard-view { grid-template-columns: 218px minmax(0, 1fr); }
  .dashboard-sidebar { width: 218px; }
  .dashboard-main { padding-right: 24px; padding-left: 24px; }
  .plans-main { padding-right: 24px; padding-left: 24px; }
  .plan-code-row { width: 220px; }
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-row { grid-template-columns: repeat(5, minmax(112px, 1fr)); }
  .dashboard-tool { grid-template-columns: 38px minmax(0, 1fr); padding: 10px; column-gap: 8px; }
  .tool-icon { width: 38px; height: 38px; }
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .dashboard-view { display: block; }
  .dashboard-view[hidden] { display: none; }
  .dashboard-sidebar {
    position: fixed;
    left: 0;
    width: 250px;
    transform: translateX(-102%);
    transition: transform 220ms ease;
  }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-backdrop {
    position: fixed;
    z-index: 35;
    inset: 0;
    background: rgba(4, 5, 8, .7);
    backdrop-filter: blur(3px);
  }
  .sidebar-close,
  .dashboard-menu-button { display: grid; }

  /* El menú lateral móvil también se cierra tocando el fondo. */
  .sidebar-close { display: none; }

  .dashboard-topbar { padding: 0 20px; }
  .dashboard-breadcrumb { margin-right: auto; }
  .dashboard-main { padding: 28px 20px 44px; }
  .plans-main { padding: 34px 20px 48px; }
  .tools-row { display: flex; overflow-x: auto; padding-bottom: 7px; scrollbar-width: thin; }
  .dashboard-tool { width: 186px; flex: 0 0 186px; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dashboard-topbar { height: 60px; padding: 0 14px; gap: 10px; }
  .dashboard-breadcrumb span,
  .dashboard-credit-pill span,
  .dashboard-new-button { display: none; }
  .dashboard-credit-pill { height: 34px; padding: 0 9px; }
  .dashboard-plans-button { height: 34px; padding: 0 10px; }
  .dashboard-auth-actions { gap: 0; }
  .dashboard-login-button { height: 34px; padding: 0 10px; }
  .dashboard-register-button { display: none; }
  .dashboard-main { padding: 23px 16px 36px; }
  .plans-main { padding: 29px 16px 38px; }
  .plans-heading h1 { font-size: 30px; }
  .plans-heading > span { max-width: 330px; margin-right: auto; margin-left: auto; }
  .plans-capabilities {
    margin: 25px 0 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
  }
  .plans-capabilities span { min-width: 0; }
  .plan-code-row {
    position: static;
    width: 100%;
    margin: -7px 0 14px;
  }
  .plan-code-controls input,
  .plan-code-controls button { height: 36px; font-size: 9px; }
  .plan-code-heading { justify-content: flex-start; }
  .plan-code-status { text-align: left; }
  .plans-grid { grid-template-columns: 1fr; gap: 16px; }
  .plan-card { min-height: 0; padding: 22px 20px; }
  .plan-description { min-height: 0; }
  .plans-footnote { align-items: flex-start; line-height: 1.4; text-align: left; }
  .dashboard-heading-row { align-items: flex-start; margin-bottom: 21px; }
  .dashboard-heading-row h1 { font-size: 30px; }
  .dashboard-heading-row > div:first-child > span { max-width: 245px; line-height: 1.4; }
  .dashboard-date { display: none; }
  .quick-create { min-height: 356px; }
  .quick-create-media { object-position: 60% center; }
  .quick-create-overlay {
    background: linear-gradient(180deg, rgba(7, 8, 13, .38) 0%, rgba(7, 8, 13, .5) 38%, rgba(7, 8, 13, .97) 74%, rgba(7, 8, 13, .98));
  }
  .quick-create-content { min-height: 356px; padding: 28px 21px; gap: 28px; }
  .quick-create-copy h2 { font-size: 36px; }
  .quick-tiktok-preview { min-height: 116px; grid-template-columns: 84px minmax(0, 1fr) 34px; }
  .quick-tiktok-preview-media { min-height: 114px; }
  .quick-tiktok-preview-copy { padding: 12px 9px; }
  .quick-tiktok-preview-meta { gap: 6px; }
  .quick-tiktok-preview-clear { width: 28px; height: 28px; margin-right: 1px; }
  .quick-composer { width: 100%; grid-template-columns: 1fr 112px; border-radius: 10px; }
  .quick-url { grid-column: 1 / -1; }
  .quick-upload { min-width: 0; padding: 0 10px; }
  .quick-launch { min-width: 0; padding: 0 10px; }
  .quick-launch span { display: none; }
  .dashboard-tools,
  .dashboard-projects { padding-top: 29px; }
  .dashboard-section-heading p { display: none; }
  .projects-heading { align-items: flex-end; }
  .projects-grid { grid-template-columns: 1fr; gap: 20px; }
  /* La base "deslizable con el dedo" ya se activa a 820px (ver más abajo);
     aquí solo se afina el tamaño de las tarjetas para pantallas de móvil. */
  .projects-grid.is-mobile-carousel {
    width: calc(100% + 16px);
    margin-right: -16px;
    padding: 2px 16px 14px 0;
    grid-auto-columns: min(82vw, 300px);
    scroll-padding-inline: 0 16px;
  }
  .project-editor-action,
  .project-card-quick-edit { font-size: 10px; }
  .project-tabs button { padding: 0 9px; }
  .editor-brand-group { gap: 8px; }
  .editor-back-button { width: 32px; height: 32px; }
  .app-shell .brand-name { display: none; }
}

@media (max-width: 400px) {
  .dashboard-credit-pill { display: none; }
}

/* Vídeo real generado por el motor */
.video-frame.has-video .result-video {
  filter: none;
}

.video-frame.has-video .preview-image,
.video-frame.has-video .motion-ghost,
.video-frame.has-video .frame-grid {
  display: none;
}

/* Selector de calidad del vídeo */
.quality-group {
  margin-top: 20px;
}

.quality-group .segmented span {
  font-size: 10px;
}

.quality-hint {
  margin-top: 8px;
}

/* Modal de edición de proyecto */
body.modal-open {
  overflow: hidden;
}

.project-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-modal[hidden] {
  display: none;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 9, 0.78);
  backdrop-filter: blur(6px);
}

.project-modal-card {
  position: relative;
  z-index: 1;
  width: min(1020px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  color: var(--white);
  border: 1px solid #2e2f37;
  border-radius: 12px;
  background: #101116;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

/* Confirmación para acciones destructivas de proyectos */
.project-delete-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-delete-modal[hidden] { display: none; }

.project-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 9, .78);
  backdrop-filter: blur(6px);
}

.project-delete-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px;
  color: var(--white);
  text-align: center;
  border: 1px solid #303743;
  border-radius: 12px;
  background: #101116;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

.project-delete-modal-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: #ff7b8d;
  border: 1px solid #773342;
  border-radius: 10px;
  background: #351820;
}

.project-delete-modal-icon .icon { width: 20px; height: 20px; }
.project-delete-modal-card h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.project-delete-modal-card p { margin: 10px 0 0; color: #9da6b3; font-size: 14px; }

.project-delete-modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.project-delete-modal-actions button { flex: 1; min-height: 40px; border-radius: 7px; font: inherit; font-weight: 700; cursor: pointer; transition: .16s ease; }
.project-delete-modal-cancel { color: #e6e9ee; border: 1px solid #303743; background: #1a1f28; }
.project-delete-modal-cancel:hover, .project-delete-modal-cancel:focus-visible { border-color: #566171; background: #242b36; }
.project-delete-modal-confirm { color: #fff; border: 1px solid #d04b60; background: #b8334a; }
.project-delete-modal-confirm:hover, .project-delete-modal-confirm:focus-visible { border-color: #ff7187; background: #d13e58; box-shadow: 0 0 16px rgba(255, 82, 111, .25); }

/* Renombrado de proyectos desde el menú de tres puntos. */
.project-rename-modal {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-rename-modal[hidden] { display: none; }

.project-rename-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 9, .78);
  backdrop-filter: blur(6px);
}

.project-rename-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px;
  color: var(--white);
  border: 1px solid #303743;
  border-radius: 12px;
  background: #101116;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

.project-rename-modal-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: #a9c9ff;
  border: 1px solid #38527d;
  border-radius: 10px;
  background: #182947;
}

.project-rename-modal-icon .icon { width: 20px; height: 20px; }
.project-rename-modal-card h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.project-rename-modal-card > p { margin: 10px 0 0; color: #9da6b3; font-size: 14px; }

.project-rename-field {
  margin-top: 20px;
  display: grid;
  gap: 7px;
  color: #c9d0dc;
  font-size: 11px;
  font-weight: 800;
}

.project-rename-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  color: #fff;
  border: 1px solid #394250;
  border-radius: 7px;
  outline: none;
  background: #171b22;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.project-rename-field input:focus {
  border-color: #76a9ff;
  box-shadow: 0 0 0 3px rgba(94, 154, 255, .16);
}

.project-rename-status {
  min-height: 16px;
  margin: 8px 0 0;
  color: #99a7b8;
  font-size: 11px;
}

.project-rename-status.error { color: #ff9ba8; }

.project-rename-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.project-rename-modal-actions button {
  flex: 1;
  min-height: 40px;
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: .16s ease;
}

.project-rename-modal-actions button:disabled { opacity: .65; cursor: wait; }
.project-rename-modal-cancel { color: #e6e9ee; border: 1px solid #303743; background: #1a1f28; }
.project-rename-modal-cancel:hover:not(:disabled), .project-rename-modal-cancel:focus-visible { border-color: #566171; background: #242b36; }
.project-rename-modal-confirm { color: #fff; border: 1px solid #4c82d2; background: #285fae; }
.project-rename-modal-confirm:hover:not(:disabled), .project-rename-modal-confirm:focus-visible { border-color: #8fbbff; background: #3676d0; box-shadow: 0 0 16px rgba(82, 147, 255, .25); }

@media (max-width: 420px) {
  .project-delete-modal-card { padding: 24px 18px; }
  .project-delete-modal-actions { flex-direction: column-reverse; }
  .project-rename-modal-card { padding: 24px 18px; }
  .project-rename-modal-actions { flex-direction: column-reverse; }
}

.project-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #23242c;
}

.project-modal-header strong {
  display: block;
  max-width: 480px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #9a9ba6;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.project-modal-close:hover {
  color: var(--white);
  background: #1c1d25;
}

.project-modal-close .icon {
  width: 16px;
  height: 16px;
}

.project-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
}

.project-modal-media {
  position: sticky;
  top: 0;
  width: 100%;
  aspect-ratio: var(--project-aspect-ratio, 9 / 16);
  max-height: 62vh;
  align-self: start;
  overflow: hidden;
  border: 1px solid #23242c;
  border-radius: 10px;
  background: #000;
}

.project-modal-video,
.project-cover-preview {
  width: 100%;
  height: 100%;
  display: block;
}

.project-modal-video {
  aspect-ratio: var(--project-aspect-ratio, 9 / 16);
  object-fit: contain;
  background: #000;
}

.project-cover-preview {
  object-fit: cover;
}

.project-modal-tools {
  min-width: 0;
}

.project-tool-section {
  padding: 0 0 18px;
  border-bottom: 1px solid #292a32;
}

.project-tool-section + .project-tool-section {
  margin-top: 18px;
}

.project-tool-section h4 {
  margin-bottom: 12px;
  color: #8d8e99;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trim-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trim-row + .trim-row {
  margin-top: 12px;
}

.trim-row label {
  width: 44px;
  color: #9a9ba6;
  font-size: 11px;
}

.trim-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.trim-row output {
  width: 54px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.music-options {
  display: grid;
  gap: 9px;
}

.music-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #c6c7d2;
  font-size: 12px;
  cursor: pointer;
}

.music-options input {
  accent-color: var(--white);
}

.music-file {
  margin-top: 12px;
}

.music-file input {
  display: none;
}

.music-file .secondary-action {
  max-width: 100%;
  cursor: pointer;
}

.music-file .secondary-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-textarea {
  width: 100%;
  min-height: 76px;
}

.cover-mode-options {
  width: 100%;
}

.cover-details {
  margin-top: 14px;
}

.cover-frame-controls,
.cover-file {
  margin-bottom: 14px;
}

.cover-frame-controls .trim-row label {
  width: 58px;
}

.cover-title-field {
  display: grid;
  gap: 7px;
  color: #9a9ba6;
  font-size: 12px;
  font-weight: 700;
}

.cover-title-field input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
}

.cover-title-options {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.project-modal-status {
  min-height: 16px;
  margin: 12px 2px 0;
  color: #9a9ba6;
  font-size: 12px;
}

.project-modal-status.error {
  color: #ff6b81;
}

.project-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.project-modal-actions button.loading {
  opacity: 0.6;
  pointer-events: none;
}

.project-modal-actions button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.45);
}

@media (max-width: 760px) {
  .project-modal:not(.project-editor) {
    padding: 12px;
  }

  .project-modal:not(.project-editor) .project-modal-body {
    grid-template-columns: 1fr;
  }

  .project-modal:not(.project-editor) .project-modal-media {
    position: relative;
    max-height: 46vh;
    justify-self: center;
    width: min(100%, 260px);
  }
}

/* Editor de proyecto a pantalla completa */
.project-editor {
  padding: 0;
}

.project-editor .editor-shell {
  width: 100%;
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.editor-topbar {
  flex-shrink: 0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #23242c;
  background: #101116;
}

.editor-topbar-back {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #9a9ba6;
  border: 1px solid #2c2d35;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.editor-topbar-back:hover {
  color: var(--white);
  background: #1c1d25;
}

.editor-topbar-back .icon {
  width: 16px;
  height: 16px;
}

.editor-topbar-title {
  min-width: 0;
  flex: 1;
}

.editor-topbar-title strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-topbar-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.editor-topbar-ghost {
  height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c6c7d2;
  border: 1px solid #2c2d35;
  border-radius: 7px;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.editor-topbar-ghost:hover {
  border-color: var(--vid-cyan);
  color: #fff;
}

.editor-topbar-ghost:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.editor-topbar-studio {
  height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  border: 1px solid #2769ce;
  border-radius: 7px;
  background: linear-gradient(180deg, #1d62cf, #12479f);
  box-shadow: 0 8px 24px rgba(13, 67, 160, .28), inset 0 1px rgba(255, 255, 255, .12);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.editor-topbar-studio:hover {
  border-color: #5592ec;
  background: linear-gradient(180deg, #2a73df, #1856b8);
  box-shadow: 0 0 22px rgba(63, 128, 229, .3);
}

.editor-topbar-save {
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0b0c10;
  border: 0;
  border-radius: 7px;
  background: var(--vid-lime);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.editor-topbar-save.loading {
  opacity: .6;
  pointer-events: none;
}

.editor-topbar-ghost .icon,
.editor-topbar-studio .icon,
.editor-topbar-save .icon {
  width: 14px;
  height: 14px;
}

.editor-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 160px;
  gap: 0;
}

.editor-left-panel {
  min-width: 0;
  padding: 18px;
  overflow-y: auto;
  border-right: 1px solid #23242c;
  background: #0d0e12;
}

.editor-panel-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #23242c;
}

.editor-panel-section + .editor-panel-section {
  margin-top: 20px;
}

.editor-panel-section h4 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c6c7d2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.editor-panel-section h4 .icon {
  width: 14px;
  height: 14px;
  color: var(--vid-cyan);
}

.editor-transcript-textarea {
  min-height: 130px;
  resize: vertical;
}

.editor-panel-section .subtitle-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-panel-section .color-field {
  grid-column: 1 / -1;
}

.editor-panel-section .color-swatches {
  grid-template-columns: repeat(auto-fill, 22px);
}

.editor-preview-column {
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow-y: auto;
  background: #08090c;
}

.editor-preview-meta {
  display: flex;
  gap: 8px;
}

.editor-meta-pill {
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c6c7d2;
  border: 1px solid #2c2d35;
  border-radius: 999px;
  background: #14151b;
  font-size: 10px;
  font-weight: 700;
}

.editor-meta-pill .icon {
  width: 12px;
  height: 12px;
}

.editor-preview-frame {
  position: relative;
  align-self: center;
  width: min(100%, 640px);
  height: auto;
  max-height: 60vh;
}

.editor-preview-frame[data-aspect-ratio="9:16"] { width: min(100%, 33.75vh, 360px); }
.editor-preview-frame[data-aspect-ratio="1:1"] { width: min(100%, 60vh, 640px); }
.editor-preview-frame[data-aspect-ratio="16:9"] { width: min(100%, 106.667vh, 960px); }
.editor-preview-frame[data-aspect-ratio="4:5"] { width: min(100%, 48vh, 512px); }

.editor-right-rail {
  min-width: 0;
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  overflow-y: auto;
  border-left: 1px solid #23242c;
  background: #0d0e12;
}

.editor-rail-item {
  width: 100%;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #8d8e99;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.editor-rail-item .icon {
  width: 18px;
  height: 18px;
}

.editor-rail-item:hover {
  color: #fff;
  background: #16171f;
}

.editor-rail-item.is-active {
  color: var(--vid-cyan);
  border-color: rgba(25, 217, 255, .3);
  background: rgba(25, 217, 255, .08);
}

.editor-ai-panel {
  position: absolute;
  z-index: 40;
  top: 64px;
  right: 168px;
  width: 260px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  color: var(--white);
  border: 1px solid #2c2d35;
  border-radius: 10px;
  background: #14151b;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
}

.editor-ai-panel[hidden] {
  display: none;
}

.editor-ai-panel-heading {
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #23242c;
}

.editor-ai-panel-heading strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}

.editor-ai-panel-heading strong .icon {
  width: 14px;
  height: 14px;
  color: var(--vid-cyan);
}

.editor-ai-panel-heading button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #9a9ba6;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.editor-ai-panel-heading button:hover {
  color: #fff;
  background: #1c1d25;
}

.editor-ai-panel-heading .icon {
  width: 14px;
  height: 14px;
}

.editor-ai-toggle-list {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.editor-ai-toggle-list li {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 7px;
}

.editor-ai-toggle-list li:hover {
  background: #191a21;
}

.editor-ai-toggle-list li span:first-child {
  color: #e4e5ea;
  font-size: 11px;
  font-weight: 600;
}

.editor-ai-soon {
  padding: 3px 8px;
  flex-shrink: 0;
  color: #7f808b;
  border: 1px solid #2c2d35;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.editor-status {
  flex-shrink: 0;
  margin: 0;
  padding: 0 20px;
  min-height: 0;
}

.editor-status:not(:empty) {
  padding: 8px 20px;
}

.editor-timeline {
  flex-shrink: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid #23242c;
  background: #0d0e12;
}

.editor-timeline-heading {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8d8e99;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.editor-timeline-heading .icon {
  width: 13px;
  height: 13px;
}

.editor-timeline-track {
  position: relative;
  padding: 64px 14px 12px;
  border: 1px solid #23242c;
  border-radius: 9px;
  background: #08090c;
}

.editor-timeline-highlight {
  position: absolute;
  top: 60px;
  bottom: 8px;
  left: var(--trim-left, 0%);
  width: var(--trim-width, 100%);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(25, 217, 255, .22), rgba(116, 87, 255, .22));
  border: 1px solid rgba(25, 217, 255, .35);
  pointer-events: none;
}

.editor-timeline-track .trim-row {
  position: relative;
  z-index: 1;
}

.editor-timeline-clip {
  position: absolute;
  top: 8px;
  left: 14px;
  right: 14px;
  height: 48px;
  display: flex;
  align-items: flex-start;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, #2a1f4d, #3d1f33);
  overflow: hidden;
}

.editor-timeline-frames {
  position: absolute;
  inset: 0;
  display: flex;
}

.editor-timeline-frames img {
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  object-fit: cover;
  border-right: 1px solid rgba(0, 0, 0, .35);
}

.editor-timeline-clip-chip {
  position: relative;
  z-index: 1;
  margin: 5px 0 0 6px;
  padding: 3px 9px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  color: #fff;
  border-radius: 999px;
  background: rgba(8, 9, 12, .72);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-timeline-playhead {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 2px;
  padding: 0;
  border: 0;
  outline: 0;
  background: #f5f7fb;
  box-shadow: 0 0 8px rgba(255, 255, 255, .75);
  cursor: ew-resize;
  touch-action: none;
  transform: translateX(-50%);
}

.editor-timeline-playhead::before {
  position: absolute;
  top: 0;
  right: -7px;
  bottom: 0;
  left: -7px;
  content: '';
}

.editor-timeline-playhead::after {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #0d0e12;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
  content: '';
  transform: translateX(-50%);
}

.editor-timeline-playhead:focus-visible::after {
  box-shadow: 0 0 0 3px rgba(25, 217, 255, .75);
}

/* Barra superior: historial, créditos y avatar */
.editor-topbar-history {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
}

.editor-topbar-history button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #6f707b;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: not-allowed;
}

.editor-topbar-history .icon {
  width: 15px;
  height: 15px;
}

.editor-topbar-credits {
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vid-lime);
  border: 1px solid #2c2d35;
  border-radius: 999px;
  background: #14151b;
  font-size: 11px;
  font-weight: 800;
}

.editor-topbar-credits .credit-icon {
  width: 14px;
  height: 14px;
}

.editor-topbar-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  color: var(--white);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vid-cyan), var(--vid-violet), var(--vid-coral));
  font-size: 9px;
  font-weight: 800;
}

.editor-topbar-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Panel izquierdo: mini barra de herramientas */
.editor-left-toolbar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.editor-left-toolbar-ghost {
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c6c7d2;
  border: 1px solid #2c2d35;
  border-radius: 7px;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.editor-left-toolbar-ghost .icon {
  width: 13px;
  height: 13px;
  color: var(--vid-cyan);
}

.editor-left-toolbar-icons {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
}

.editor-left-toolbar-icons button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #8d8e99;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.editor-left-toolbar-icons button:hover {
  color: #fff;
  background: #191a21;
}

.editor-left-toolbar-icons .icon {
  width: 14px;
  height: 14px;
}

/* Pills decorativos de diseño / seguimiento en el preview */
.editor-meta-pill-button {
  border: 1px solid #2c2d35;
  cursor: pointer;
}

.editor-meta-pill-button:hover {
  border-color: var(--vid-cyan);
  color: #fff;
}

/* Panel "próximamente" genérico (riel derecho) */
.editor-soon-panel {
  position: absolute;
  z-index: 40;
  top: 64px;
  right: 168px;
  width: 240px;
  color: var(--white);
  border: 1px solid #2c2d35;
  border-radius: 10px;
  background: #14151b;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
}

.editor-soon-panel[hidden] {
  display: none;
}

.editor-soon-copy {
  margin: 0;
  padding: 13px 14px;
  color: #9a9ba6;
  font-size: 11px;
  line-height: 1.6;
}

/* Transporte de reproducción de la línea de tiempo */
.editor-timeline-transport {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-timeline-transport button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #c6c7d2;
  border: 1px solid #2c2d35;
  border-radius: 7px;
  background: #14151b;
  cursor: pointer;
}

.editor-timeline-transport button:hover {
  border-color: var(--vid-cyan);
  color: #fff;
}

.editor-timeline-transport .icon {
  width: 13px;
  height: 13px;
}

.editor-timeline-code {
  margin-left: 6px;
  color: #9a9ba6;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .editor-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
  }

  .editor-left-panel,
  .editor-right-rail {
    border: 0;
    border-top: 1px solid #23242c;
  }

  .editor-right-rail {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .editor-rail-item {
    width: auto;
  }

  .editor-ai-panel {
    right: 20px;
    left: 20px;
    width: auto;
  }

  .editor-preview-frame {
    height: min(50vh, 460px);
  }
}

@media (max-width: 560px) {
  .editor-topbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .editor-topbar-ghost span,
  .editor-topbar-studio span,
  .editor-topbar-save span {
    display: none;
  }

  .editor-topbar-ghost,
  .editor-topbar-studio,
  .editor-topbar-save {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .editor-topbar-actions {
    gap: 6px;
  }
}

/* Personalización y subtítulos */
.character-group,
.subtitle-group {
  margin-top: 20px;
}

.character-group .setting-heading {
  margin-bottom: 8px;
}

.character-group .setting-label {
  margin-bottom: 0;
}

.character-group textarea,
.subtitle-group textarea,
.project-textarea {
  width: 100%;
  padding: 10px 12px;
  resize: vertical;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  font-size: 12px;
  line-height: 1.45;
}

.character-group textarea {
  min-height: 76px;
}

.subtitle-group textarea {
  min-height: 92px;
}

.character-group textarea:focus-visible,
.subtitle-group textarea:focus-visible,
.project-textarea:focus-visible,
.compact-select-field select:focus-visible,
.cover-title-field input:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 1px;
}

.subtitle-controls {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.compact-select-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.compact-select-field select,
.cover-title-field input {
  min-width: 0;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  font: inherit;
}

.compact-select-field select {
  width: 100%;
  height: 36px;
  padding: 0 28px 0 10px;
}

.color-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.color-field legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.color-swatches {
  min-height: 36px;
  display: grid;
  grid-template-columns: repeat(5, 22px);
  align-items: center;
  gap: 9px;
}

.color-swatches label {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
  cursor: pointer;
}

.color-swatches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.color-swatches span {
  width: 22px;
  height: 22px;
  display: block;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
}

.color-swatches input:checked + span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.color-swatches input:focus-visible + span {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: 3px;
}

.subtitle-live-preview {
  --subtitle-color: #fff;
  position: absolute;
  z-index: 8;
  right: 8%;
  left: 8%;
  padding: 5px 8px;
  color: var(--subtitle-color);
  font-size: clamp(14px, 3.1vh, 28px);
  line-height: 1.18;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.subtitle-live-preview[data-position="top"] {
  top: 9%;
}

.subtitle-live-preview[data-position="center"] {
  top: 50%;
  transform: translateY(-50%);
}

.subtitle-live-preview[data-position="bottom"] {
  bottom: 13%;
}

.subtitle-live-preview[data-size="small"] {
  font-size: clamp(11px, 2.3vh, 22px);
}

.subtitle-live-preview[data-size="large"] {
  font-size: clamp(20px, 4.2vh, 42px);
}

.subtitle-live-preview[data-style="outline"] {
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 8px #000;
}

.subtitle-live-preview[data-style="box"] {
  border-radius: 5px;
  background: rgba(0, 0, 0, .68);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
}

.subtitle-live-preview[data-style="shadow"] {
  text-shadow: 0 4px 5px #000, 0 0 12px #000;
}

.overlay-preview-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.project-roi-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  z-index: 5;
}

.project-roi-overlay__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 9, 12, .72);
  color: #dfe6ff;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

.project-roi-overlay__region {
  position: absolute;
  border: 2px solid #4387ee;
  background: rgba(67, 135, 238, .14);
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, .45);
  cursor: move;
}

.project-roi-overlay__clear {
  position: absolute;
  top: -28px;
  right: 0;
  padding: 4px 9px;
  border: none;
  border-radius: 6px;
  background: #1c2030;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}

.overlay-list {
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
}

.editor-transcript-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.editor-transcript-list {
  margin: 10px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
}

.editor-transcript-list li {
  padding: 6px 8px;
  border-radius: 6px;
  background: #11141c;
  color: #c7cede;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.editor-transcript-list li:hover { background: #1a1e2b; }
.editor-transcript-list li time { color: #7f9ce0; margin-right: 6px; font-variant-numeric: tabular-nums; }

.overlay-list-item {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #2b2c34;
  border-radius: 7px;
  background: #14151b;
}

.overlay-list-item > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overlay-list-item strong {
  overflow: hidden;
  color: #f1f2f5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-list-item span {
  color: #7f808b;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.overlay-list-remove {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #9a9ba6;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.overlay-list-remove:hover {
  color: #ff6b81;
  background: #1c1d25;
}

.overlay-list-remove .icon {
  width: 13px;
  height: 13px;
}

.overlay-list-empty {
  padding: 8px 0;
  color: #7f808b;
  font-size: 10px;
}

.overlay-form {
  padding-top: 4px;
}

.overlay-text-input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  margin-bottom: 10px;
  color: #f1f2f5;
  border: 1px solid #2c2d35;
  border-radius: 6px;
  background: #14151b;
  font-size: 11px;
}

.overlay-time-row {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.overlay-time-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #91929d;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.overlay-time-row input {
  height: 34px;
  padding: 0 9px;
  color: #f1f2f5;
  border: 1px solid #2c2d35;
  border-radius: 6px;
  background: #14151b;
  font-size: 11px;
}

.overlay-add-button {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

.cover-title-preview {
  --cover-title-color: #fff;
  position: absolute;
  z-index: 9;
  right: 8%;
  left: 8%;
  padding: 8px 10px;
  color: var(--cover-title-color);
  font-size: clamp(18px, 3vh, 30px);
  line-height: 1.08;
  font-weight: 850;
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 5px 14px #000;
  pointer-events: none;
}

.cover-title-preview[data-position="top"] {
  top: 9%;
}

.cover-title-preview[data-position="center"] {
  top: 50%;
  transform: translateY(-50%);
}

.cover-title-preview[data-position="bottom"] {
  bottom: 11%;
}

@media (max-width: 620px) {
  .subtitle-controls,
  .cover-title-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .color-field {
    align-self: end;
  }
}

/* Galería de modos creativos */
.creative-modes {
  min-width: 0;
  overflow: visible;
}

.creative-modes-heading {
  align-items: flex-end;
}

.creative-mode-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 2px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: #3c4048 transparent;
}

.creative-mode-rail::-webkit-scrollbar {
  height: 6px;
}

.creative-mode-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #3c4048;
}

.creative-mode-card {
  position: relative;
  min-width: 0;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #30343c;
  border-radius: 8px;
  background: #090b0e;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
  scroll-snap-align: start;
  isolation: isolate;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.creative-mode-card:hover,
.creative-mode-card:focus-within {
  border-color: rgba(255, 255, 255, .88);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .62),
    0 0 18px rgba(255, 255, 255, .34),
    0 0 38px rgba(255, 255, 255, .16),
    0 22px 52px rgba(0, 0, 0, .46);
  transform: translateY(-2px);
}

.creative-mode-card > img,
.creative-mode-card > video,
.creative-card-comparison,
.creative-card-comparison > img,
.creative-card-after,
.creative-card-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.creative-mode-card > img,
.creative-mode-card > video,
.creative-card-comparison > img,
.creative-card-after img {
  object-fit: cover;
  transition: transform 550ms cubic-bezier(.2, .7, .2, 1), filter 300ms ease;
}

.creative-mode-card > img:focus-visible,
.creative-mode-card > video:focus-visible {
  outline: 2px solid #5c9dff;
  outline-offset: -2px;
}

.creative-mode-card:hover > img,
.creative-mode-card:hover > video,
.creative-mode-card:hover .creative-card-comparison > img,
.creative-mode-card:hover .creative-card-after img {
  transform: scale(1.025);
}

.creative-mode-card:nth-child(1) > video { object-position: 50% 36%; }
.creative-mode-text-video > video { object-position: 50% 50%; }
.creative-mode-image-video > video { object-position: 50% 50%; }
.creative-mode-two-image-video > video { object-position: 50% 50%; filter: saturate(.84) hue-rotate(12deg); }
.creative-mode-free-badge {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  min-width: 44px;
  height: 20px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: #168cff;
  box-shadow: 0 0 12px rgba(22,140,255,.72), 0 0 26px rgba(22,140,255,.42), inset 0 1px rgba(255,255,255,.3);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .09em;
}

.top-layout-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.top-layout-options label span {
  min-height: 72px;
  align-items: flex-start;
  justify-content: center;
  border-color: rgba(35, 139, 255, .52);
  background: linear-gradient(145deg, rgba(0, 92, 255, .24), rgba(0, 180, 255, .08));
  box-shadow: inset 0 0 20px rgba(0, 128, 255, .12), 0 0 14px rgba(0, 128, 255, .13);
}
.top-layout-preview { position: relative; width: 100%; height: 54px; margin-bottom: 8px; display: block; overflow: hidden; border: 1px solid rgba(117,193,255,.36); border-radius: 7px; background: linear-gradient(140deg, #26384b, #08111c 60%); }
.top-layout-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 45%, rgba(74,143,192,.5)); }
.top-layout-preview b { position: absolute; z-index: 1; width: 28%; height: 4px; border-radius: 3px; background: #56b8ff; box-shadow: 0 0 5px rgba(54,171,255,.7); }
.top-layout-preview b:nth-child(1) { top: 11px; }.top-layout-preview b:nth-child(2) { top: 23px; }.top-layout-preview b:nth-child(3) { top: 35px; }
.top-layout-preview::after{content:"";position:absolute;right:0;left:0;height:52%;background:rgba(3,13,27,.76)}.top-layout-preview-top::after{top:0}.top-layout-preview-middle::after{top:24%}.top-layout-preview-bottom::after{bottom:0}.top-layout-preview-top b,.top-layout-preview-middle b,.top-layout-preview-bottom b{left:9px}.top-layout-preview-top b:nth-child(1){top:5px}.top-layout-preview-top b:nth-child(2){top:14px}.top-layout-preview-top b:nth-child(3){top:23px}.top-layout-preview-middle b:nth-child(1){top:16px}.top-layout-preview-middle b:nth-child(2){top:25px}.top-layout-preview-middle b:nth-child(3){top:34px}.top-layout-preview-bottom b:nth-child(1){top:29px}.top-layout-preview-bottom b:nth-child(2){top:38px}.top-layout-preview-bottom b:nth-child(3){top:47px}
.top-layout-options input:checked + span {
  color: #fff;
  border-color: #33a6ff;
  background: linear-gradient(145deg, #0877ff, #064ee6);
  box-shadow: 0 0 8px rgba(38, 151, 255, .9), 0 0 25px rgba(0, 102, 255, .55), inset 0 1px rgba(255,255,255,.25);
}
.top-layout-options small { display: block; margin-top: 5px; opacity: .65; font-size: 11px; }
.top-video-titles { display: grid; gap: 9px; margin-top: 14px; }
.top-video-titles > p { color: var(--muted, #89909f); font-size: 13px; }
.top-video-titles label { display: grid; grid-template-columns: 32px 70px 1fr; align-items: center; gap: 10px; padding: 5px; border: 1px solid rgba(35,139,255,.32); border-radius: 12px; background: linear-gradient(90deg, rgba(0,91,255,.16), rgba(0,174,255,.035)); box-shadow: 0 0 15px rgba(0,112,255,.1); cursor: grab; transition: border-color .18s, box-shadow .18s, transform .18s; }
.top-video-titles label:active { cursor: grabbing; }
.top-video-titles label b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; border: 1px solid #54b7ff; background: linear-gradient(145deg, #1596ff, #0757ef); box-shadow: 0 0 9px rgba(26,151,255,.9), 0 0 22px rgba(0,101,255,.52); }
.top-video-titles label span { font-size: 12px; color: var(--muted, #89909f); }
.top-video-titles input { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: inherit; background: rgba(255,255,255,.045); }
.top-font-options { display: grid; gap: 16px; margin-top: 16px; }
.top-font-options fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.top-font-options legend { margin-bottom: 8px; color: #aebed0; font-size: 11px; font-weight: 750; }
.top-font-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.top-font-grid label { min-width: 0; cursor: pointer; }
.top-font-grid input { position: absolute; opacity: 0; pointer-events: none; }
.top-font-grid span { min-height: 68px; padding: 9px 5px; display: grid; place-items: center; gap: 3px; overflow: hidden; color: #dcecff; border: 1px solid rgba(35,139,255,.36); border-radius: 10px; background: linear-gradient(145deg,rgba(0,92,255,.18),rgba(0,180,255,.045)); transition: .18s; }
.top-font-grid b { font-family: var(--sample-font); font-size: 22px; line-height: 1; white-space: nowrap; }
.top-font-grid small { max-width: 100%; overflow: hidden; color: #8da4ba; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.top-font-grid input:checked + span { color:#fff; border-color:#3caeff; background:linear-gradient(145deg,#0877ff,#064ee6); box-shadow:0 0 8px rgba(38,151,255,.9),0 0 23px rgba(0,102,255,.48),inset 0 1px rgba(255,255,255,.22); }
.top-font-grid input:checked + span small { color:#e8f7ff; }
.top-background-options{margin:16px 0 0;padding:0;border:0}.top-background-options legend{margin-bottom:8px;color:#aebed0;font-size:11px;font-weight:750}.top-background-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.top-background-grid>label{cursor:pointer}.top-background-grid>label>input{position:absolute;opacity:0;pointer-events:none}.top-background-grid>label>span{min-height:58px;padding:8px 12px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;color:#dcecff;border:1px solid rgba(35,139,255,.34);border-radius:10px;background:linear-gradient(145deg,rgba(0,92,255,.15),rgba(0,180,255,.04));font-size:11px}.top-background-grid>label>input:checked+span{border-color:#3caeff;background:linear-gradient(145deg,rgba(8,119,255,.72),rgba(6,78,230,.72));box-shadow:0 0 18px rgba(0,102,255,.38)}.top-background-grid input[type="color"]{position:static;width:38px;height:34px;padding:2px;opacity:1;pointer-events:auto;border:1px solid rgba(255,255,255,.3);border-radius:7px;background:#09111c}.top-background-transparent{width:38px;height:34px;border-radius:7px;background-color:#fff;background-image:linear-gradient(45deg,#b8c0ca 25%,transparent 25%),linear-gradient(-45deg,#b8c0ca 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b8c0ca 75%),linear-gradient(-45deg,transparent 75%,#b8c0ca 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.top-background-grid small{color:#b8d7f2;font-family:monospace;font-size:9px}
.top-color-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.top-color-options label { min-width:0; padding:10px 12px; display:grid; grid-template-columns:1fr 42px auto; align-items:center; gap:10px; color:#aebed0; border:1px solid rgba(35,139,255,.34); border-radius:11px; background:linear-gradient(145deg,rgba(0,92,255,.15),rgba(0,180,255,.04)); font-size:11px; }
.top-color-options input[type="color"] { width:42px; height:34px; padding:2px; border:1px solid rgba(255,255,255,.3); border-radius:8px; outline:0; background:#09111c; cursor:pointer; }
.top-color-options b { color:#dcecff; font-family:monospace; font-size:9px; }
.top-effect-options { margin:16px 0 0; padding:0; border:0; }.top-effect-options legend { margin-bottom:8px; color:#aebed0; font-size:11px; font-weight:750; }.top-effect-options legend small{margin-left:5px;color:#61778e;font-weight:500}
.top-effect-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }.top-effect-grid label{cursor:pointer}.top-effect-grid input{position:absolute;opacity:0;pointer-events:none}.top-effect-grid span{min-height:50px;display:grid;place-items:center;color:#dcecff;border:1px solid rgba(35,139,255,.34);border-radius:10px;background:linear-gradient(145deg,rgba(0,92,255,.15),rgba(0,180,255,.04));font-size:11px;font-weight:800;transition:.18s}.top-effect-grid input:checked+span{border-color:#3caeff;background:linear-gradient(145deg,#0877ff,#064ee6);box-shadow:0 0 8px rgba(38,151,255,.9),0 0 23px rgba(0,102,255,.48)}
.sample-shadow{text-shadow:1px 2px 2px rgba(0,0,0,.6)}.sample-outline{-webkit-text-stroke:.45px rgba(0,0,0,.78)}.sample-neon{text-shadow:0 0 3px rgba(85,186,255,.62),0 0 7px rgba(8,127,255,.34)}.sample-raised{text-shadow:1px 1px 0 rgba(255,255,255,.2),2px 2px 2px rgba(0,0,0,.58)}
.sample-3d{text-shadow:1px 1px 0 #6586a8,2px 2px 0 #4c6885,3px 3px 0 #34495f,5px 6px 4px rgba(0,0,0,.72)}.sample-chrome{color:#eef7ff;background:linear-gradient(#fff 20%,#6f8da8 48%,#fff 53%,#335b82 78%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.5px #d9efff;filter:drop-shadow(0 2px 2px #1679d2)}.sample-comic{color:#ffe229;-webkit-text-stroke:1.2px #111;text-shadow:2px 2px 0 #f34848;transform:rotate(-2deg)}.sample-cinema{font-family:Georgia,serif;letter-spacing:.1em;text-shadow:0 2px 4px #000;color:#f4ddb0}
.mode-reference-item > video { width: 100%; height: 100%; object-fit: cover; }
.mode-reference-item[draggable="true"] { cursor: grab; transition: transform .18s, border-color .18s, box-shadow .18s; }
.mode-reference-item[draggable="true"]:active { cursor: grabbing; }
.top-video-titles label.is-dragging, .mode-reference-item.is-dragging { opacity: .45; transform: scale(.96); }
.top-video-titles label.is-drop-target, .mode-reference-item.is-drop-target { border-color: #39adff; box-shadow: 0 0 8px #198fff, 0 0 28px rgba(0,119,255,.75); transform: translateY(-2px); }
.mode-open-video-editor { text-decoration: none; }
.top-local-render-note { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 14px 16px; border: 1px solid rgba(45,169,255,.46); border-radius: 12px; color: #eaf7ff; background: linear-gradient(135deg, rgba(0,111,255,.18), rgba(0,190,255,.06)); box-shadow: 0 0 18px rgba(0,126,255,.14); }
.top-local-render-note > .icon { width: 25px; height: 25px; color: #49b7ff; filter: drop-shadow(0 0 7px #087fff); }
.top-local-render-note span { display: grid; gap: 3px; }
.top-local-render-note strong { font-size: 13px; }
.top-local-render-note small { color: rgba(229,244,255,.62); font-size: 11px; }
.top-preview-overlay { position: absolute; z-index: 8; top: 22px; left: 22px; width: min(310px, calc(100% - 44px)); padding: 17px; border: 1px solid rgba(55,168,255,.55); border-radius: 16px; color: #fff; background:var(--top-panel-bg,rgba(3,9,20,.9)); box-shadow: 0 0 16px rgba(0,130,255,.3), 0 18px 45px rgba(0,0,0,.42); backdrop-filter: blur(18px); pointer-events: none; }
.top-preview-overlay[data-background="transparent"]{border-color:rgba(55,168,255,.24);box-shadow:none;backdrop-filter:none}
.top-preview-overlay[data-layout="blurred-top"] { right: 150px; left: 22px; width: auto; }
.top-preview-overlay[data-layout="inside"] { width: min(300px, calc(100% - 170px)); }
.top-preview-overlay[data-layout="compact"] { right: 150px; left: auto; width: min(330px, calc(100% - 180px)); padding: 12px 14px; }
.mode-preview-stage:has(.top-preview-overlay:not([hidden])) .top-preview-overlay {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 18px;
  width: 300px;
  max-height: calc(100% - 36px);
  padding: 16px;
  overflow: hidden;
  transform: translateY(-50%);
}
.mode-preview-stage:has(.top-preview-overlay:not([hidden])) #modeSourceVideo {
  top: 0;
  right: 164px;
  bottom: 0;
  left: 338px;
  width: auto;
  height: 100%;
  background: #050609;
}
.top-preview-overlay[hidden], .top-preview-queue[hidden] { display: none; }
.top-preview-kicker { color: #55b8ff; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.top-preview-overlay h3 { margin: 5px 0 12px; color:var(--top-title-color,#fff); font-family: var(--top-title-font, Impact, sans-serif); font-size: clamp(15px, 2vw, 22px); line-height: 1.1; }
.top-preview-overlay ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.top-preview-overlay li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; min-height: 25px; color: rgba(255,255,255,.38); font-size: 11px; }
.top-preview-overlay li b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(75,175,255,.28); border-radius: 7px; font-family: var(--top-number-font, Impact, sans-serif); }
.top-preview-overlay li span, .top-preview-now strong { font-family: var(--top-title-font, Impact, sans-serif); }
.top-preview-overlay li.is-filled { color:var(--top-title-color,#fff); }
.top-preview-overlay li.is-filled b { color:var(--top-number-color,#169bff); border-color:currentColor; background:rgba(3,14,28,.72); box-shadow:0 0 10px color-mix(in srgb,currentColor 70%,transparent); }
.top-preview-overlay li.is-active { color: #fff; font-weight: 800; }
.top-preview-now { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: 10px; }
.top-preview-now span { color: #55baff; white-space: nowrap; }
.top-preview-now strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-preview-overlay[data-effect="shadow"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){text-shadow:1px 2px 2px rgba(0,0,0,.6)}.top-preview-overlay[data-effect="outline"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){-webkit-text-stroke:.45px rgba(0,0,0,.78)}.top-preview-overlay[data-effect="neon"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){text-shadow:0 0 3px color-mix(in srgb,currentColor 62%,transparent),0 0 7px color-mix(in srgb,currentColor 34%,transparent)}.top-preview-overlay[data-effect="raised"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){text-shadow:1px 1px 0 rgba(255,255,255,.2),2px 2px 2px rgba(0,0,0,.58)}
.top-preview-overlay[data-effect="3d"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){text-shadow:1px 1px 0 #6586a8,2px 2px 0 #4c6885,3px 3px 0 #34495f,5px 6px 4px rgba(0,0,0,.72)}.top-preview-overlay[data-effect="chrome"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){color:#eaf6ff;-webkit-text-stroke:.5px #d9efff;text-shadow:0 2px 2px #1679d2}.top-preview-overlay[data-effect="comic"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){color:#ffe229;-webkit-text-stroke:1px #111;text-shadow:2px 2px 0 #f34848}.top-preview-overlay[data-effect="cinema"] :is(h3,li.is-filled span,li.is-filled b,.top-preview-now strong){font-family:Georgia,serif;letter-spacing:.06em;color:#f4ddb0;text-shadow:0 2px 4px #000}
.top-preview-queue { position: absolute; z-index: 9; top: 50%; right: 18px; bottom: auto; left: auto; display: flex; flex-direction: column; justify-content: center; gap: 8px; transform: translateY(-50%); }
.top-preview-queue button { position: relative; width: 126px; height: 92px; padding: 0; overflow: hidden; border: 1px solid rgba(75,175,255,.32); border-radius: 12px; background: #060a10; opacity: .68; cursor: grab; transition: opacity .18s, transform .18s, box-shadow .18s; }
.top-preview-queue button:active { cursor: grabbing; }
.top-preview-queue button.is-dragging { opacity:.35; transform:scale(.94); }
.top-preview-queue button.is-drop-target { opacity:1; border-color:#45b3ff; box-shadow:0 0 9px #087fff,0 0 28px rgba(0,119,255,.75); transform:translateX(-7px); }
.top-preview-queue button.is-active { opacity: 1; transform: translateY(-4px); border-color: #4db4ff; box-shadow: 0 0 9px #087fff, 0 0 22px rgba(0,119,255,.55); }
.top-preview-queue video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.top-preview-queue button > span { position: absolute; z-index: 2; top: 4px; left: 4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; background: #087bf4; font-size: 9px; font-weight: 900; }
.top-preview-queue small { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 11px 4px 3px; overflow: hidden; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.86)); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .top-layout-options, .top-font-options, .top-color-options { grid-template-columns: 1fr; } .top-font-grid,.top-effect-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .top-preview-overlay { top: 10px; left: 10px; width: calc(100% - 20px); padding: 11px; } .top-preview-overlay ol { grid-template-columns: repeat(5, 1fr); } .top-preview-overlay li { display: block; text-align: center; } .top-preview-overlay li span { display: none; } .top-preview-queue { top: auto; right: 8px; bottom: 8px; left: 8px; flex-direction: row; gap: 4px; transform: none; } .top-preview-queue button { width: 58px; height: 46px; } }
@media (min-width:721px) and (max-width:1050px){.mode-preview-stage:has(.top-preview-overlay:not([hidden])) .top-preview-overlay{left:10px;width:220px;padding:11px}.mode-preview-stage:has(.top-preview-overlay:not([hidden])) #modeSourceVideo{right:108px;left:242px}.top-preview-queue{right:10px}.top-preview-queue button{width:88px;height:66px}}
@media (max-width:720px){.mode-preview-stage:has(.top-preview-overlay:not([hidden])) .top-preview-overlay{top:10px;right:10px;left:10px;width:auto;max-height:155px;transform:none}.mode-preview-stage:has(.top-preview-overlay:not([hidden])) #modeSourceVideo{inset:0;width:100%;height:100%}}

/* Los campos ya comunican el foco con su propio borde/resplandor. Evita el
   rectángulo gris duplicado que las reglas globales dibujaban sobre el label. */
:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable="true"]):focus,
:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable="true"]):focus-visible {
  outline: none;
}
label:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus),
label:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible) {
  outline: none;
}
.creative-mode-storyboard > img { object-position: 50% 50%; filter: grayscale(1) contrast(1.25); }
.creative-mode-text-image > img { object-position: 62% 50%; }
.creative-mode-image-editor > img { object-position: 50% 50%; }

.creative-mode-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 5, 7, .08) 35%, rgba(4, 5, 7, .34) 62%, rgba(4, 5, 7, .94) 100%);
  pointer-events: none;
}

.creative-mode-tags {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.creative-mode-tags span {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 4px;
  color: #f4f5f7;
  background: rgba(9, 11, 15, .58);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
  backdrop-filter: blur(8px);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

.creative-mode-restore .creative-mode-tags {
  right: 15px;
  justify-content: space-between;
}

.creative-mode-copy {
  position: absolute;
  z-index: 6;
  right: 17px;
  bottom: 17px;
  left: 17px;
}

.creative-mode-copy > small {
  display: block;
  margin-bottom: 8px;
  color: #aeb2b8;
  font-size: 10px;
  line-height: 1.4;
}

.creative-mode-copy button {
  width: 100%;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.creative-mode-copy button strong {
  min-width: 0;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.08;
  font-weight: 780;
}

.creative-mode-copy button .icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.creative-mode-copy button:hover {
  text-shadow: 0 0 12px rgba(255, 255, 255, .72);
}

.creative-mode-copy button:hover .icon {
  transform: translateX(4px);
}

.creative-card-before {
  filter: grayscale(1) sepia(.3) contrast(.72) brightness(.72) blur(.35px);
}

.creative-mode-restore .creative-card-comparison img {
  object-position: center top;
}

.creative-card-after {
  overflow: hidden;
  clip-path: inset(0 0 0 var(--card-compare));
}

.creative-card-after img {
  filter: saturate(1.08) contrast(1.05) brightness(1.04);
}

.creative-card-divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--card-compare);
  width: 1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 18px rgba(255, 255, 255, .45);
  pointer-events: none;
}

.creative-card-divider i {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  color: #11151b;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .36);
  transform: translate(-50%, -50%);
}

.creative-card-divider .icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.creative-card-dragger {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 98px;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline-offset: -3px;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.creative-card-dragger:hover,
.creative-card-dragger:active {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* Galería de imágenes */
.dashboard-gallery {
  min-width: 0;
  padding-top: 34px;
  overflow: hidden;
}

.business-showcase {
  position: relative;
  width: 100%;
  min-height: clamp(430px, 52vw, 720px);
  margin-top: clamp(38px, 6vw, 84px);
  overflow: hidden;
  border: 1px solid rgba(78, 147, 255, .22);
  border-radius: 18px;
  background: #06090f;
  isolation: isolate;
}

.business-showcase-video,
.business-showcase-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.business-showcase-video {
  z-index: -2;
  object-fit: cover;
}

.business-showcase-shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 8, 15, .24), rgba(4, 8, 15, .7)),
    radial-gradient(circle at 50% 42%, transparent 12%, rgba(3, 7, 14, .42) 100%);
}

.business-showcase-content {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.business-showcase-content p {
  margin: 0 0 14px;
  color: #78adff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-shadow: 0 0 20px rgba(58, 137, 255, .7);
}

/* Blanco liso y con la tipografía general de la web: sin relieve 3D, sin
   degradado y sin resplandor azul. La única sombra que queda es un negro muy
   suave, porque el título va sobre un vídeo y sin ella se pierde en los
   fotogramas claros. */
.business-showcase-content h2,
.business-showcase-title-link {
  max-width: 900px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(38px, 6.2vw, 92px);
  font-weight: 720;
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-decoration: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  cursor: pointer;
}

.business-showcase-content button {
  min-width: 132px;
  height: 44px;
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  color: #f8fbff;
  border: 1px solid rgba(119, 173, 255, .68);
  border-radius: 999px;
  background: rgba(17, 79, 171, .78);
  box-shadow: 0 12px 32px rgba(6, 36, 87, .4);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.business-showcase-content button:hover,
.business-showcase-content button:focus-visible {
  background: #246fd5;
  box-shadow: 0 14px 38px rgba(32, 107, 214, .5);
  transform: translateY(-2px);
}

.business-showcase-content button .icon {
  width: 15px;
  height: 15px;
}

.seedance-promo-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(220px, 26vw, 360px);
  margin-top: clamp(24px, 3.4vw, 40px);
  padding: 28px 24px;
  overflow: hidden;
  border-radius: 18px;
  background: #06090f;
  isolation: isolate;
}

.seedance-promo-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dos vídeos de fondo distintos: el vertical (móvil, <=640px) y uno
   horizontal en 1080p pensado para PC (>=641px) — igual que el resto del
   proyecto, se alternan con display:none/block por CSS en vez de JS, así
   IntersectionObserver nunca activa la descarga del que no se muestra
   (un elemento display:none no intersecta nunca). */
.seedance-promo-video-desktop {
  display: none;
}

@media (min-width: 641px) {
  .seedance-promo-video-mobile { display: none; }
  .seedance-promo-video-desktop { display: block; }
}

.seedance-promo-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 8, 15, .55) 0%, rgba(4, 8, 15, 0) 20%),
    linear-gradient(0deg, rgba(4, 8, 15, .55) 0%, rgba(4, 8, 15, 0) 20%);
  pointer-events: none;
}

.seedance-promo-shade-strong {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 8, 15, .92) 0%, rgba(4, 8, 15, 0) 36%),
    linear-gradient(0deg, rgba(4, 8, 15, .92) 0%, rgba(4, 8, 15, 0) 36%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.seedance-promo-showcase:hover .seedance-promo-shade-strong,
.seedance-promo-showcase:focus-within .seedance-promo-shade-strong {
  opacity: 1;
}

.seedance-promo-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.seedance-promo-logo {
  width: clamp(320px, 46vw, 600px);
  height: auto;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .55));
}

.seedance-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -14px;
  height: 44px;
  padding: 0 26px;
  color: #eaf3ff;
  border: 1px solid rgba(139, 190, 255, .55);
  border-radius: 999px;
  background: rgba(15, 30, 54, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.seedance-promo-cta:hover,
.seedance-promo-cta:focus-visible {
  background: rgba(66, 137, 255, .22);
  border-color: rgba(180, 214, 255, .85);
  transform: translateY(-1px);
}

/* En PC el botón "Vidreum Studio" solo aparece al pasar el ratón por encima
   del vídeo (o con foco de teclado); en móvil (sin hover real) se queda
   siempre visible. */
@media (min-width: 641px) {
  .seedance-promo-cta {
    opacity: 0;
    transition: opacity .3s ease, background .2s ease, border-color .2s ease, transform .2s ease;
  }

  .seedance-promo-showcase:hover .seedance-promo-cta,
  .seedance-promo-showcase:focus-within .seedance-promo-cta {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .seedance-promo-showcase { min-height: clamp(160px, 42vw, 260px); border-radius: 14px; }
  .seedance-promo-logo { width: clamp(220px, 74vw, 360px); }
  .seedance-promo-cta { height: 40px; padding: 0 20px; font-size: 12px; }
}

/* Showcase "VIDREUM" bajo la publicidad de Seedance 2.5: vídeo de fondo sin
   borde (solo un desvanecido/fade en los bordes superior e inferior, más
   alto en escritorio). Toda la caja es un enlace a Vidreum Studio
   (.vidreum-showcase-link, position:absolute cubriendo la sección); el
   texto "VIDREUM" — solo contorno blanco, sin relleno ni difuminado — está
   oculto (opacity:0) y solo aparece al pasar el ratón o dar foco, momento
   en el que también se intensifica el degradado de los bordes. */
.vidreum-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(260px, 40vw, 640px);
  margin-top: clamp(16px, 2.4vw, 24px);
  overflow: hidden;
  border-radius: 18px;
  background: #06090f;
  isolation: isolate;
}

.vidreum-showcase-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vidreum-showcase-edge-fade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 8, 15, .55) 0%, rgba(4, 8, 15, 0) 20%),
    linear-gradient(0deg, rgba(4, 8, 15, .55) 0%, rgba(4, 8, 15, 0) 20%);
  pointer-events: none;
}

.vidreum-showcase-edge-fade-strong {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 8, 15, .92) 0%, rgba(4, 8, 15, 0) 36%),
    linear-gradient(0deg, rgba(4, 8, 15, .92) 0%, rgba(4, 8, 15, 0) 36%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.vidreum-showcase:hover .vidreum-showcase-edge-fade-strong,
.vidreum-showcase:focus-within .vidreum-showcase-edge-fade-strong {
  opacity: 1;
}

.vidreum-showcase-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.vidreum-bubble-title {
  position: relative;
  width: fit-content;
  max-width: 90%;
  margin: 0;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 8.6vw, 118px);
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.vidreum-showcase:hover .vidreum-bubble-title,
.vidreum-showcase:focus-within .vidreum-bubble-title {
  opacity: 1;
}

@supports not ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)) {
  .vidreum-bubble-title { color: #ffffff; }
}

@media (max-width: 640px) {
  .vidreum-showcase { min-height: clamp(180px, 52vw, 300px); border-radius: 14px; }
  .vidreum-bubble-title { font-size: clamp(32px, 13vw, 60px); -webkit-text-stroke-width: 1.5px; text-stroke-width: 1.5px; }
}

/* Pantalla de acceso beta: cubre toda la web con un vídeo de fondo (el
   mismo archivo vertical, con object-fit:cover se ve "horizontal" en
   pantallas anchas y a pantalla completa vertical en móvil) más un
   formulario de contraseña. Se muestra siempre por defecto (para que no
   dependa de que el script inline llegue a ejecutarse antes del primer
   pintado) y el script del body la retira si ya estaba desbloqueada. */
html.beta-locked,
html.beta-locked body {
  overflow: hidden;
}

.beta-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #02050a;
  isolation: isolate;
  transition: opacity .4s ease, visibility 0s linear .4s;
}

.beta-gate.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.beta-gate-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dos vídeos de fondo: el vertical (móvil, <=640px) tal cual se grabó, y
   uno horizontal para PC/tablet (>=641px) con el mismo material girado
   90° por ffmpeg (transpose), no reescalado — así en pantallas anchas se
   ve nítido en vez de estirado/borroso por el object-fit:cover del vertical. */
.beta-gate-video-desktop {
  display: none;
}

@media (min-width: 641px) {
  .beta-gate-video-mobile { display: none; }
  .beta-gate-video-desktop { display: block; }
}

.beta-gate-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 38%, rgba(6, 14, 32, .35) 0%, rgba(3, 8, 18, .55) 48%, rgba(2, 5, 10, .82) 100%),
    linear-gradient(180deg, rgba(2, 5, 10, .78) 0%, rgba(2, 5, 10, .2) 26%, rgba(2, 5, 10, .35) 68%, rgba(2, 5, 10, .92) 100%);
  pointer-events: none;
}

.beta-gate-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.4vw, 32px);
  width: min(92vw, 460px);
  padding: clamp(20px, 4vw, 32px);
  text-align: center;
}

.beta-gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
}

.beta-gate-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
}

.beta-gate-logo {
  display: block;
  width: clamp(96px, 18vw, 160px);
  aspect-ratio: 1;
}

.beta-gate-logo .site-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mismo logo "neón" que la marca del menú, pero muy atenuado aquí: en
   esta pantalla el logo es mucho más grande, así que el brillo por
   defecto resultaba excesivo. Se sube la opacidad del PNG real y se deja
   el degradado animado casi apagado, en vez de depender del brillo. */
.beta-gate-logo.desktop-neon-logo .site-logo {
  opacity: 1;
}

body.theme-graphite .beta-gate-logo.desktop-neon-logo .site-logo {
  filter: grayscale(1) sepia(.12) saturate(.35) brightness(2.35);
}

.beta-gate-logo.desktop-neon-logo::before {
  opacity: 0;
  filter: none;
}

.beta-gate-logo.desktop-neon-logo::after {
  opacity: 0;
}

.beta-gate-brand-text {
  color: #eaf3ff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 820;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.beta-gate-badge {
  display: inline-flex;
  align-items: center;
  height: fit-content;
  padding: 5px 14px;
  color: #ffffff;
  border: 1px solid rgba(139, 190, 255, .55);
  border-radius: 999px;
  background: #05070c;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: clamp(14px, 2.4vw, 20px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(66, 137, 255, .4);
}

.beta-gate-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  padding: 0;
}

.beta-gate-label {
  max-width: 340px;
  color: rgba(234, 243, 255, .82);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.beta-gate-input-row {
  display: flex;
  width: 100%;
  gap: 10px;
}

.beta-gate-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  color: #fff;
  border: 1px solid rgba(139, 190, 255, .35);
  border-radius: 12px;
  background: rgba(10, 20, 38, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
}

.beta-gate-input::placeholder {
  color: rgba(234, 243, 255, .4);
}

.beta-gate-input:focus {
  outline: none;
  border-color: rgba(139, 190, 255, .85);
  background: rgba(10, 20, 38, .78);
}

.beta-gate-submit {
  flex-shrink: 0;
  height: 48px;
  padding: 0 24px;
  color: #ffffff;
  border: 1px solid rgba(139, 190, 255, .35);
  border-radius: 12px;
  background: #05070c;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.beta-gate-submit:hover,
.beta-gate-submit:focus-visible {
  border-color: rgba(139, 190, 255, .85);
  box-shadow: 0 0 26px rgba(66, 137, 255, .55);
  transform: translateY(-1px);
}

.beta-gate-error {
  margin: 0;
  color: #ff9d9d;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .beta-gate-brand-row { flex-wrap: wrap; }
  .beta-gate-input-row { flex-direction: column; }
  .beta-gate-submit { width: 100%; }
}

.nanobanana-promo-showcase {
  position: relative;
  display: block;
  width: 100%;
  margin-top: clamp(24px, 3.4vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(78, 147, 255, .22);
  border-radius: 18px;
  background: #06090f;
  isolation: isolate;
}

.nanobanana-promo-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1300 / 733;
  object-fit: cover;
}

.nanobanana-promo-shade {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(4, 8, 15, 0), rgba(4, 8, 15, .82) 78%);
  pointer-events: none;
}

.nanobanana-promo-cta {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(16px, 3vw, 28px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  color: #fff;
  border: 1px solid rgba(105, 171, 255, .7);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 130, 235, .97), rgba(20, 79, 166, .98));
  box-shadow: 0 16px 42px rgba(2, 10, 22, .5), 0 10px 32px rgba(13, 81, 169, .32);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nanobanana-promo-cta:hover,
.nanobanana-promo-cta:focus-visible {
  border-color: rgba(180, 214, 255, .85);
  box-shadow: 0 20px 50px rgba(2, 10, 22, .58), 0 12px 36px rgba(13, 81, 169, .4);
  transform: translateX(-50%) translateY(-1px);
}

.nanobanana-promo-cta .icon { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .nanobanana-promo-showcase { border-radius: 14px; }
  .nanobanana-promo-cta { height: 40px; padding: 0 18px; font-size: 12px; }
}

@media (max-width: 700px) {
  .business-showcase {
    min-height: 520px;
    margin-top: 38px;
    border-radius: 13px;
  }

  .business-showcase-content {
    padding: 42px 18px;
  }

  .business-showcase-content p {
    font-size: 9px;
    letter-spacing: .17em;
  }

  .business-showcase-content h2,
  .business-showcase-title-link {
    font-size: clamp(39px, 13vw, 62px);
  }
}

.clipping-menu-showcase {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.6vw, 34px);
  min-height: clamp(190px, 20vw, 264px);
  margin-top: clamp(38px, 6vw, 84px);
  padding: clamp(14px, 1.8vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(123, 166, 222, .2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 18%, rgba(38, 114, 219, .16), transparent 42%),
    linear-gradient(135deg, #10161f, #080b10 72%);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.clipping-menu-showcase::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(78, 147, 255, .16) 90deg, transparent 200deg);
  animation: clipping-menu-showcase-spin 9s linear infinite;
  pointer-events: none;
}

@keyframes clipping-menu-showcase-spin {
  to { transform: rotate(360deg); }
}

.clipping-menu-showcase-media {
  position: relative;
  z-index: 1;
  flex: 0 0 clamp(200px, 30%, 340px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 180, 222, .22);
  border-radius: 13px;
  background: #05070a;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

.clipping-menu-showcase-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.clipping-menu-showcase-media:hover img,
.clipping-menu-showcase-media:focus-visible img {
  transform: scale(1.06);
}

.clipping-menu-showcase-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(2, 5, 9, .55));
}

.clipping-menu-showcase-content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  color: #f4f8ff;
}

.clipping-menu-showcase-content p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: #6faeff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .2em;
}

.clipping-menu-showcase-content p .icon {
  width: 12px;
  height: 12px;
}

.clipping-menu-showcase-content h2 {
  max-width: 480px;
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.clipping-menu-showcase-content > span {
  display: block;
  max-width: 420px;
  margin: 10px 0 0;
  color: #9ca9b9;
  font-size: clamp(12px, 1.1vw, 13.5px);
  line-height: 1.5;
}

.clipping-menu-showcase-cta {
  min-width: 168px;
  height: 42px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  padding: 0 20px;
  color: #fff;
  border: 1px solid rgba(105, 171, 255, .7);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 130, 235, .97), rgba(20, 79, 166, .98));
  box-shadow: 0 12px 30px rgba(13, 81, 169, .38);
  font: inherit;
  font-size: 11.5px;
  font-weight: 820;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.clipping-menu-showcase-cta:hover,
.clipping-menu-showcase-cta:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px rgba(20, 98, 200, .46);
}

.clipping-menu-showcase-cta .icon { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .clipping-menu-showcase {
    flex-direction: column;
    min-height: 0;
    padding: 12px;
    border-radius: 14px;
  }

  .clipping-menu-showcase-media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }

  .clipping-menu-showcase-content {
    align-items: flex-start;
    padding-top: 14px;
  }

  .clipping-menu-showcase-content h2,
  .clipping-menu-showcase-content span {
    max-width: none;
  }

  .clipping-menu-showcase-cta {
    align-self: center;
  }
}

/* Logotipo de Kling. Es la silueta real de la marca (la cinta retorcida), no
   un icono redibujado: se usa como máscara PNG en línea y el color lo pone
   `currentColor`, así se pinta en blanco en el carrusel de la cabecera y sigue
   al tema en cualquier otro sitio. Va incrustado en el CSS a propósito: como
   archivo suelto en assets/ habría que subirlo además a R2 (en producción esa
   carpeta se sirve desde allí) y se vería roto hasta hacerlo. */
.engine-logo-kling {
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAMe0lEQVR42u2de4xcVR3HP7+Z2dJCsRQoChEIQoOAFEop0uKrFGgFpSDwh4ZEEQkxRIOJSPwHMSEmlkRDCBoSCFGJEoEArYWWRyigrVQepYANIIIGFIE+lIe0OzNf/7i/A4fr7M69M3dm7ix7kklntrN7z/m938cY0JJkQAUwM6u3+P+DgMOAjwEHAPOBJnAE8GFAgIWv+/t/AU/7330JeBj4K7DZzF5o8YwaIDNrDAoONgDAV4BKGuiSZgNLgOOB2cAngF0LeuzbwFPAc8AfgTVm9lwLYmiamSYkAiRVSci94Z9HgOOAZcCpDvQp6V9zqo/3auPsW/4i+rfS4vs7HRl3AneY2R9S+5SZNScEAtIHknQwcA7wVeDjqa/XIwBbgftT6lVL/f864DfALWb2SrTvvnNEoYB31g6fF0u6XdK/9d5qShqV1PD3/VpNf+Zo6rlbJV0t6ZBYT8TnGAbAV1zOh88nSVqTAkAAellW3V9hvSnpGkkHpkVo2YFfi94vkXRPiurqfab0TjhjNPr8iqRLJH2oFVeXjerN3x8m6cYWgB+mlUbE05KWlpIb4s1IuljSf8Zg62FcaUT8TNKekRU3OCso2M5m1pA0B/gJsDiyZmpMnNWMTNongAvN7GFJ1W6duEoXzhQO/IvdjFvsgNcEA36AU8XPdxTwoKRv+fmrsdHRcw4IWJc0Bfg1cJb/VwOoMvFXM/JRlpvZpYEoO3HeLK+VY2Z1SYcCVwMnO+ArgwhrDFL1+blrwB3A18xseyciyToA/lHA3cA+E1DW513h/BuAz5vZ1rycYDmBP9eBv/ck8N9do8AI8AiwFNjm+rFZiBKOgH8scK8DvzEJ/HfXiCPhWOBaB7wVwgER8OcDa4CZHyBl26k4Ot3MVmbVB5YB+J8EVgN7TAJ/3BWMkceABUAjixiqjGNq1iUdAdwzCfxMq+om6jzgJDNrZglZVMbwcJE0E/gFsPsk8HPnHc7MauRUxgovuH07z2XbJPCze8wGLJQ0FWi2i56mOSDEdpYDn540NTuOLOwHVHPpgCjEsAi4ZEhNzZBDrvurkXqFnzd7iIAmMB04OoupX4tEjyRNB65LlXwMg/WhKGBmGYOMinSbFUwEI264tF2BwoPVs5ykDqfsoieOxcT6aQvwMkk90D/dOzX//jRgEbAXSTXGgdEZe2Fk1DMhIDI5FwHfLDnwY8CHPf4euA94AHjSzF4f5/d/6xy/C0n90RnAV0jiWhTM+ZkSNua26hQ/yDEuwyqU19ME2ApcD9xuZuvGyU2rhYx+XyWcpFnAxcClkS1f6TJcPQp8xsw2ZArOSbooqlYo24rTmlsk/UjS/rHp7KUjmRPm/jvVVBHBQkmv+3MaXaQwwz6nxX7VeJvZTdKL/tBGSfOxDUlXSNo3Va/TNac6Mkb8/VxJr6WAmWcF+D0vaVf/220RcFmXWO8V8MNaLWlerwulAjdIOtqLxzopoQkEc0u6TGc8P+CsVOK5DGalATuAH3p08dEAeDOr96Jc0A2RETPbCHzX9UGnz3ksD+YPkLSpJDqgHhVELYjldb/LbCQ93oFkCCWWC3LVD0napwRI2On/3i9pv0HVZUYIWNbCCMgi/1+TNCOTAk49cJakjQNCQnjevZH1MJAAYFCcXu33TA4uCIW+v8qz/xB8q5rZa8BJwONub9fpX061BlxB0ifwjtvOA+lacf0SAmlrc+jHEAa5uVvW21PSI33ihPD3V8XUV5ZyS0nnZhRDzUj87J5Z/MQeX8QJW0nqfTb0mBOCZ3sncKYf2krSEBH2sJmkm8Yyli7ebGZvOBzVLfb3kLS+R5wQKGpdULRFOFUFNxAiabo3bbRzzIL1M7cQ/RWAIWmGA6lIJASP++/emFe65oc4LStpWxsEBLjc44q7WrQcnC7poYKQEIcXTszqLZYcAcFjPqFwYoo4YbqktSl7vRvRc1VZgZ9TBIXzrO4ZJ0dI2M2dpE45IcjJzR6oqpa1+S068yHeL9ZsgYBm5B8s6KkojTY0zZ2lTpAQvn9a2ZveIvF7+jhmaNqErvSLKqZGXY87cwL/pjKLnpx+QPjZ/L4RVISEXSTdlZETAqvukHRYX6ilgNC0m8a/HOOMAfg39P08ERKmSFqVgRPC5m8cEuq3qPPz2RaxoKAPtnv8rP8+TGhLdUpZ0cZdD5tf3O/QcpfiZ44TVmMM6v/GQHVZCgm3jxE1DJ83lSXOkyMzdnkL8RPO8+qgo7ZpJFQkPdcCCWHzlw+D+EmJoE3jEFVD0m0DD6NE7Hqes2t9jM3OGYZ5C8E3kXRqmzxA+PmKgSEhov5Z0QSUZgtZuSFKchjDIf9XZwhDB8NjlbfsDswaumGMzQbxc+2QWD/hPIdKejvjCJ1wxru82q4/SIgoZX4GR+X8IRI/lWjCSz1nLnuN9wT01SteNY4z1vDNHV925ysiqNO6DLPEOe1Krze7IBVka5Wi25o3RTegJHzVA4Sbu6gQHI2qOnbrGRIyKqqAgG3ea1ZmBAS7/6qcomc8cbTWey2KRUIE/BPaDGKKEbBHWREQAf/sVGlJEYUGD0VIqPZKUY1mQEApOSAiptleFV1kcfJolPOeUQgnRBuem0pGjIeArREVWNlGrLkTta4A0TMeEtZHUqBaxMCmC3iv7addaccUkjHDlKXnLGqYGCFpxV1Ab1pxQ0nP8cAaSTND6U838ZHdc9TPB4o6oyx+QIf5jKI44ZFo3lw1LweE7y0imZaSZSJI4JD5jkAbtMz38QFTgRUko2VG+9APFzhhHnCvpL1jTsgrgs5JzXMmQ9PyIq8Saw4Y+A13kn4HnOJAGenTFgIS5joSZmUWR5H4mRGJn6zWQvCGjxxEMiYoWn+/X5dVHUWKo02S9unE823mNNXqeVt2ejG72vf+So+snW6QcEAljyiJWvHJMcKlAXxJ0he9DajWD6r38vYRTwbd79ZYGaa+BHF0JLAyjw44hs7nJwi4TtJBvUJCBHj5M+a5sv0BsIvvoVqiqSoAt2btFtnVWy877aYMbP9AFC0cKcI5c6cq7vfd11taGwWGF4pcIXj5YgjaZVHA07z5WF0cJs6Qzeu03zdusk7dT7C/N3FvGaPJuywr6ICLsgztq7jtfBzwoJttlS5bUKvAduCnwJVm9t+MIwbwOWxK7XEhycyH84E9Kffs6jAG4W8kFxTtsIz28xeAlQUpsXgWw7MkV4fcBDyTpavEU39HAp91wH+K93fdVEs8aqfuZz/VzNZIqmZFwBKSyYlFWRFKDYSqOzLWk9x29HzqiqoDgDkkF/0c7J8ZIsDHXHmDmX09TKWs5TCdKHiyVM25IUxbP9xfeRBoDvjaEAz8rgAvApeFC4LyAHa7x02qPTLHNMaVVem4kkUTsWpDNkqtCpxnZi+FuFQWBASAbATeJJmc24txZpZj1BhDOlH3SjNbG0RPntnRFWf3f4xhoUyu9sB/yMy+56KnkTkh41ZJxczeIbklQyWaqsIQDBOsuUGxbKyL4So5mpZvK/h2u4kO/CrwBnCumW2LCLqj+wMq/gfXR3PlJqfptnc2l/plP7VWN8bmSciYmY2SDFCyST3QFvjbgFPaAT8zAqI5Eis9gldzs3Ry/T/wtzrw/9QO+HnvkAnImule8bHR9R2T1k5ClK878B/PAvxcOeHgOJjZFpKLlzc48OuTwKcGvEpyb0Bm4OdOyodLCXykzRKSCGkQRx80vRDHsx514D+RB/gdFWa5PqiY2Xbgc8DySAw1P0DyPsShbgUWmtmTYQx0z68ydE4I1xleCnybZLBRZYKLJEWR17eA75jZ2cBop2PWrICOwjB37mTg5yTh4mY3CC65lQPwJHBBuNBz4FefR6N/91Jy5atKmo/tNJUa8ss7JP04asAoT0Q2da/wUkl/HnJENFI55bslHd7CLC9fu09UyPt97zgcJkSkZ0bfJ+mUVgVfpe+3jdo+r5H0VuqQ9ZJRe7pc8TFJF6aIa3h0WroW1KdPXR2NAItnyDUGwBmNFhzZ8M7PE8c6B/Tm2qVe1+RbMNEkfQQ4G/gysLCFV2mpV5EXrClKD8Z/+xngLuB6M3sqXZRAH+69ot+ICM1+wDKSkcWzSTpqSKVEldprO8Q0U3mMsah3M0mpzQpgg0d7W+5zQiAg7TukbWefIbqEpKXnGOAgYGpBj30HeIFkLvZ6kuzexvhuFxcz6uRa8qFCQAtlbWn33Ydf7A+cAMwguXbqo07dR5BUOrcqDtgZpU5f9oDhX0hqjl4ysx0t2lQ1SEfqfx+2kBHqa6pyAAAAAElFTkSuQmCC");
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAMe0lEQVR42u2de4xcVR3HP7+Z2dJCsRQoChEIQoOAFEop0uKrFGgFpSDwh4ZEEQkxRIOJSPwHMSEmlkRDCBoSCFGJEoEArYWWRyigrVQepYANIIIGFIE+lIe0OzNf/7i/A4fr7M69M3dm7ix7kklntrN7z/m938cY0JJkQAUwM6u3+P+DgMOAjwEHAPOBJnAE8GFAgIWv+/t/AU/7330JeBj4K7DZzF5o8YwaIDNrDAoONgDAV4BKGuiSZgNLgOOB2cAngF0LeuzbwFPAc8AfgTVm9lwLYmiamSYkAiRVSci94Z9HgOOAZcCpDvQp6V9zqo/3auPsW/4i+rfS4vs7HRl3AneY2R9S+5SZNScEAtIHknQwcA7wVeDjqa/XIwBbgftT6lVL/f864DfALWb2SrTvvnNEoYB31g6fF0u6XdK/9d5qShqV1PD3/VpNf+Zo6rlbJV0t6ZBYT8TnGAbAV1zOh88nSVqTAkAAellW3V9hvSnpGkkHpkVo2YFfi94vkXRPiurqfab0TjhjNPr8iqRLJH2oFVeXjerN3x8m6cYWgB+mlUbE05KWlpIb4s1IuljSf8Zg62FcaUT8TNKekRU3OCso2M5m1pA0B/gJsDiyZmpMnNWMTNongAvN7GFJ1W6duEoXzhQO/IvdjFvsgNcEA36AU8XPdxTwoKRv+fmrsdHRcw4IWJc0Bfg1cJb/VwOoMvFXM/JRlpvZpYEoO3HeLK+VY2Z1SYcCVwMnO+ArgwhrDFL1+blrwB3A18xseyciyToA/lHA3cA+E1DW513h/BuAz5vZ1rycYDmBP9eBv/ck8N9do8AI8AiwFNjm+rFZiBKOgH8scK8DvzEJ/HfXiCPhWOBaB7wVwgER8OcDa4CZHyBl26k4Ot3MVmbVB5YB+J8EVgN7TAJ/3BWMkceABUAjixiqjGNq1iUdAdwzCfxMq+om6jzgJDNrZglZVMbwcJE0E/gFsPsk8HPnHc7MauRUxgovuH07z2XbJPCze8wGLJQ0FWi2i56mOSDEdpYDn540NTuOLOwHVHPpgCjEsAi4ZEhNzZBDrvurkXqFnzd7iIAmMB04OoupX4tEjyRNB65LlXwMg/WhKGBmGYOMinSbFUwEI264tF2BwoPVs5ykDqfsoieOxcT6aQvwMkk90D/dOzX//jRgEbAXSTXGgdEZe2Fk1DMhIDI5FwHfLDnwY8CHPf4euA94AHjSzF4f5/d/6xy/C0n90RnAV0jiWhTM+ZkSNua26hQ/yDEuwyqU19ME2ApcD9xuZuvGyU2rhYx+XyWcpFnAxcClkS1f6TJcPQp8xsw2ZArOSbooqlYo24rTmlsk/UjS/rHp7KUjmRPm/jvVVBHBQkmv+3MaXaQwwz6nxX7VeJvZTdKL/tBGSfOxDUlXSNo3Va/TNac6Mkb8/VxJr6WAmWcF+D0vaVf/220RcFmXWO8V8MNaLWlerwulAjdIOtqLxzopoQkEc0u6TGc8P+CsVOK5DGalATuAH3p08dEAeDOr96Jc0A2RETPbCHzX9UGnz3ksD+YPkLSpJDqgHhVELYjldb/LbCQ93oFkCCWWC3LVD0napwRI2On/3i9pv0HVZUYIWNbCCMgi/1+TNCOTAk49cJakjQNCQnjevZH1MJAAYFCcXu33TA4uCIW+v8qz/xB8q5rZa8BJwONub9fpX061BlxB0ifwjtvOA+lacf0SAmlrc+jHEAa5uVvW21PSI33ihPD3V8XUV5ZyS0nnZhRDzUj87J5Z/MQeX8QJW0nqfTb0mBOCZ3sncKYf2krSEBH2sJmkm8Yyli7ebGZvOBzVLfb3kLS+R5wQKGpdULRFOFUFNxAiabo3bbRzzIL1M7cQ/RWAIWmGA6lIJASP++/emFe65oc4LStpWxsEBLjc44q7WrQcnC7poYKQEIcXTszqLZYcAcFjPqFwYoo4YbqktSl7vRvRc1VZgZ9TBIXzrO4ZJ0dI2M2dpE45IcjJzR6oqpa1+S068yHeL9ZsgYBm5B8s6KkojTY0zZ2lTpAQvn9a2ZveIvF7+jhmaNqErvSLKqZGXY87cwL/pjKLnpx+QPjZ/L4RVISEXSTdlZETAqvukHRYX6ilgNC0m8a/HOOMAfg39P08ERKmSFqVgRPC5m8cEuq3qPPz2RaxoKAPtnv8rP8+TGhLdUpZ0cZdD5tf3O/QcpfiZ44TVmMM6v/GQHVZCgm3jxE1DJ83lSXOkyMzdnkL8RPO8+qgo7ZpJFQkPdcCCWHzlw+D+EmJoE3jEFVD0m0DD6NE7Hqes2t9jM3OGYZ5C8E3kXRqmzxA+PmKgSEhov5Z0QSUZgtZuSFKchjDIf9XZwhDB8NjlbfsDswaumGMzQbxc+2QWD/hPIdKejvjCJ1wxru82q4/SIgoZX4GR+X8IRI/lWjCSz1nLnuN9wT01SteNY4z1vDNHV925ysiqNO6DLPEOe1Krze7IBVka5Wi25o3RTegJHzVA4Sbu6gQHI2qOnbrGRIyKqqAgG3ea1ZmBAS7/6qcomc8cbTWey2KRUIE/BPaDGKKEbBHWREQAf/sVGlJEYUGD0VIqPZKUY1mQEApOSAiptleFV1kcfJolPOeUQgnRBuem0pGjIeArREVWNlGrLkTta4A0TMeEtZHUqBaxMCmC3iv7addaccUkjHDlKXnLGqYGCFpxV1Ab1pxQ0nP8cAaSTND6U838ZHdc9TPB4o6oyx+QIf5jKI44ZFo3lw1LweE7y0imZaSZSJI4JD5jkAbtMz38QFTgRUko2VG+9APFzhhHnCvpL1jTsgrgs5JzXMmQ9PyIq8Saw4Y+A13kn4HnOJAGenTFgIS5joSZmUWR5H4mRGJn6zWQvCGjxxEMiYoWn+/X5dVHUWKo02S9unE823mNNXqeVt2ejG72vf+So+snW6QcEAljyiJWvHJMcKlAXxJ0he9DajWD6r38vYRTwbd79ZYGaa+BHF0JLAyjw44hs7nJwi4TtJBvUJCBHj5M+a5sv0BsIvvoVqiqSoAt2btFtnVWy877aYMbP9AFC0cKcI5c6cq7vfd11taGwWGF4pcIXj5YgjaZVHA07z5WF0cJs6Qzeu03zdusk7dT7C/N3FvGaPJuywr6ICLsgztq7jtfBzwoJttlS5bUKvAduCnwJVm9t+MIwbwOWxK7XEhycyH84E9Kffs6jAG4W8kFxTtsIz28xeAlQUpsXgWw7MkV4fcBDyTpavEU39HAp91wH+K93fdVEs8aqfuZz/VzNZIqmZFwBKSyYlFWRFKDYSqOzLWk9x29HzqiqoDgDkkF/0c7J8ZIsDHXHmDmX09TKWs5TCdKHiyVM25IUxbP9xfeRBoDvjaEAz8rgAvApeFC4LyAHa7x02qPTLHNMaVVem4kkUTsWpDNkqtCpxnZi+FuFQWBASAbATeJJmc24txZpZj1BhDOlH3SjNbG0RPntnRFWf3f4xhoUyu9sB/yMy+56KnkTkh41ZJxczeIbklQyWaqsIQDBOsuUGxbKyL4So5mpZvK/h2u4kO/CrwBnCumW2LCLqj+wMq/gfXR3PlJqfptnc2l/plP7VWN8bmSciYmY2SDFCyST3QFvjbgFPaAT8zAqI5Eis9gldzs3Ry/T/wtzrw/9QO+HnvkAnImule8bHR9R2T1k5ClK878B/PAvxcOeHgOJjZFpKLlzc48OuTwKcGvEpyb0Bm4OdOyodLCXykzRKSCGkQRx80vRDHsx514D+RB/gdFWa5PqiY2Xbgc8DySAw1P0DyPsShbgUWmtmTYQx0z68ydE4I1xleCnybZLBRZYKLJEWR17eA75jZ2cBop2PWrICOwjB37mTg5yTh4mY3CC65lQPwJHBBuNBz4FefR6N/91Jy5atKmo/tNJUa8ss7JP04asAoT0Q2da/wUkl/HnJENFI55bslHd7CLC9fu09UyPt97zgcJkSkZ0bfJ+mUVgVfpe+3jdo+r5H0VuqQ9ZJRe7pc8TFJF6aIa3h0WroW1KdPXR2NAItnyDUGwBmNFhzZ8M7PE8c6B/Tm2qVe1+RbMNEkfQQ4G/gysLCFV2mpV5EXrClKD8Z/+xngLuB6M3sqXZRAH+69ot+ICM1+wDKSkcWzSTpqSKVEldprO8Q0U3mMsah3M0mpzQpgg0d7W+5zQiAg7TukbWefIbqEpKXnGOAgYGpBj30HeIFkLvZ6kuzexvhuFxcz6uRa8qFCQAtlbWn33Ydf7A+cAMwguXbqo07dR5BUOrcqDtgZpU5f9oDhX0hqjl4ysx0t2lQ1SEfqfx+2kBHqa6pyAAAAAElFTkSuQmCC");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Logotipo de Seedance (ByteDance), la silueta real de la marca. Mismo
   planteamiento que .engine-logo-kling: máscara PNG en línea y color por
   `currentColor`. */
.engine-logo-seedance {
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAGR0lEQVR42u2dW6hUZRTHf2vPrmNlF0W6vIRZSlcIzAtB5oNdsOhBIQoSMnoMgnrrPXro2SDoIawXTSKpvFQKXsqKNLVMPZmFICkReclQz8z8e9jf9nxu5xzPnDOzx5lZCz6Gs5k9Z7N+31rfZX9rLXBpWiRVwucCSaclrZH0oqRZDb6bSqpIMtdc6wCk4fNZXSynJO2Q9IakhyRdWwQXWhJfdDLjB7AkKP6spJoulUOS3pL0pKTrCr9h+e8gKQmmkjiQpgAsDYoeCp/1AGKoAYxjkt6XtCx2VSbpJjM70eAfCKibmVzllwIws6qkpcAaoAqkDb5aDy0JLZdzwB5gbQq8J2kysBb4FthrZtXon+U31wE5kKYkVryAGmDAADAXmJsC1wOPA08EJQ9KWgesA3ab2d/hultH4x4+VrHISpR36DRQqQUzGgDuDu014JikXcBnwAYz+71gHZVgFfU+BXDNOO8zoEIgcuGPQEaR37oVWBzaOUm7ga+B9cB2Mzvb5xawuBU+qkgmCWCSyG/l1jEvWMaXwH5JKyXND1OqpA8BpO3+gaJ11MNnAkwPbbKZLQnuqN9ckVoBYKzz/hgGwPkAot/d0IRd0NAE7m0GoMsISpw/wnjgUhKAaZGLcekAAF/ZdhiA9/wOA3BxAA7AxQE4ABcH4ABcHIADcHEADsDFAdCpMz+lvl5NXeEyht+F18JRG7kFtL+Xp5IqZiYzq5tZ1cwk6QZJM8o6N5v2kdIvnPAL55iq4fpVwL3AM8AiYCawAXiJ7B141QGM37UkgIXenZ/TRNJU4LHQ5gP3FW5/mOzGqlvAOHt7UHgtujYbWAgsAB4BphRuqwbfX+pBg54EYGZ1STcDc4LCFwP3F75Wa3AYrV72G8K0B90OwNvAcmDqCEpPCmec6NqjdVde57e6pEVB+UNRD79ilN4Pg/DJ6AhlBV8Jly6Vbjnt4VsRDqC/Je3AwggPb+oAgKDwWjHavM9DnNoPIGx41SS9CtwObAR2mNnpgnVU+jESs4wxIJ+N3EUW3rQR+DWEN70gaWbYkayGXUmFcP60H4LGy3BBuduZx/DO4i3AstDOSvoJ+AT4CthnZmcaWUcvuqq0JN9PWJmmUZxZHrQ8iWzPZg7wJnBY0nfAx8A2Mzve7i3hflkJV0cJWs4DAFNgRmjPA/9I2glsAz4CDvTa+FAmABvl+kVT1AjKFLKXJIuAp81sbrTV7ABKmBiIbEMtIUtw4S6oZMkH4EqvRvL4VoQDcAAuDsABuDgAB+DiAByAiwNwAC4OwAG4OAAH4OIAHICLA3AALg6gZ0UOoLNiDoCOVt4YdACdTXt/IOnhHtYNRxgHuilK0pqs7WJkB4DVoIyUD8LjkKEmIO0HzgBXM1yOJU/QcUVZR9JF/nLD5Z7ZzPJYhOXAHcBzwLvAz4XaOBZVj5KfDR2bnG0iJqEG/AWsAlaFeLSFZDkjngJmcXEAdwzC3AIm+KwhIVOclKlmZpvM7HWy1DSzgVeAT4F/A4yU4UwpdbeA1kTlVBvlDgJ+DG2FpNvI0tc8ShZG9SBZdUEH0I4Q2UKOOJnZn8Dq0JB0D1nYlANoIwxF2bPyGIS8Pub+Mh+n77MmBiDF6rGUFAZ1Pp3garPaa0WASlJ8PtOano5D6Xmhz6vDtUm4jHdG90A6hkVQPUpmFy/p/yALH30n+NG667V5LzKWMtzxguUIWQnvRuVs1aZNtWoPvzhK0nhGUMivBnAM2Al8TlYDfU8hjUCrCzoXK7YmkYur0Fvb0QacSBtUST1IVkF7PcMlzRmhpHmthVvH1sDijobn+AA4EFxdrQcA5GkatqZkAdC7gO3AJmCzmQ01SPmbK73aol5eb7BNfBLYEjrA4ZAr4nwP9fpaIafdtBS408yOjtLL6y0aYPPK3GlhJnAE+AH4EPgmJOegQWKnbsyyVbTuNNpY3AusSHPlF5TejuwkN4YHOAcMApvJMqLsNrNTBYVbi91cmb08TjwSW/dxsi31Q8BqMxsESPPkFyUkql4fevoW4GA8cAc3Z12o8Ni6k+hdQ67434DvgZXAVjP7r5hDLy0r84iZvXwZN9fNMhA+TwP7yLa5vwB+KSi9EnW0OlArM2tiJdprVxmp4Uusx7wGWBfGsMFRxrBLrPt/TcUcYibNPQkAAAAASUVORK5CYII=");
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAGR0lEQVR42u2dW6hUZRTHf2vPrmNlF0W6vIRZSlcIzAtB5oNdsOhBIQoSMnoMgnrrPXro2SDoIawXTSKpvFQKXsqKNLVMPZmFICkReclQz8z8e9jf9nxu5xzPnDOzx5lZCz6Gs5k9Z7N+31rfZX9rLXBpWiRVwucCSaclrZH0oqRZDb6bSqpIMtdc6wCk4fNZXSynJO2Q9IakhyRdWwQXWhJfdDLjB7AkKP6spJoulUOS3pL0pKTrCr9h+e8gKQmmkjiQpgAsDYoeCp/1AGKoAYxjkt6XtCx2VSbpJjM70eAfCKibmVzllwIws6qkpcAaoAqkDb5aDy0JLZdzwB5gbQq8J2kysBb4FthrZtXon+U31wE5kKYkVryAGmDAADAXmJsC1wOPA08EJQ9KWgesA3ab2d/hultH4x4+VrHISpR36DRQqQUzGgDuDu014JikXcBnwAYz+71gHZVgFfU+BXDNOO8zoEIgcuGPQEaR37oVWBzaOUm7ga+B9cB2Mzvb5xawuBU+qkgmCWCSyG/l1jEvWMaXwH5JKyXND1OqpA8BpO3+gaJ11MNnAkwPbbKZLQnuqN9ckVoBYKzz/hgGwPkAot/d0IRd0NAE7m0GoMsISpw/wnjgUhKAaZGLcekAAF/ZdhiA9/wOA3BxAA7AxQE4ABcH4ABcHIADcHEADsDFAdCpMz+lvl5NXeEyht+F18JRG7kFtL+Xp5IqZiYzq5tZ1cwk6QZJM8o6N5v2kdIvnPAL55iq4fpVwL3AM8AiYCawAXiJ7B141QGM37UkgIXenZ/TRNJU4LHQ5gP3FW5/mOzGqlvAOHt7UHgtujYbWAgsAB4BphRuqwbfX+pBg54EYGZ1STcDc4LCFwP3F75Wa3AYrV72G8K0B90OwNvAcmDqCEpPCmec6NqjdVde57e6pEVB+UNRD79ilN4Pg/DJ6AhlBV8Jly6Vbjnt4VsRDqC/Je3AwggPb+oAgKDwWjHavM9DnNoPIGx41SS9CtwObAR2mNnpgnVU+jESs4wxIJ+N3EUW3rQR+DWEN70gaWbYkayGXUmFcP60H4LGy3BBuduZx/DO4i3AstDOSvoJ+AT4CthnZmcaWUcvuqq0JN9PWJmmUZxZHrQ8iWzPZg7wJnBY0nfAx8A2Mzve7i3hflkJV0cJWs4DAFNgRmjPA/9I2glsAz4CDvTa+FAmABvl+kVT1AjKFLKXJIuAp81sbrTV7ABKmBiIbEMtIUtw4S6oZMkH4EqvRvL4VoQDcAAuDsABuDgAB+DiAByAiwNwAC4OwAG4OAAH4OIAHICLA3AALg6gZ0UOoLNiDoCOVt4YdACdTXt/IOnhHtYNRxgHuilK0pqs7WJkB4DVoIyUD8LjkKEmIO0HzgBXM1yOJU/QcUVZR9JF/nLD5Z7ZzPJYhOXAHcBzwLvAz4XaOBZVj5KfDR2bnG0iJqEG/AWsAlaFeLSFZDkjngJmcXEAdwzC3AIm+KwhIVOclKlmZpvM7HWy1DSzgVeAT4F/A4yU4UwpdbeA1kTlVBvlDgJ+DG2FpNvI0tc8ShZG9SBZdUEH0I4Q2UKOOJnZn8Dq0JB0D1nYlANoIwxF2bPyGIS8Pub+Mh+n77MmBiDF6rGUFAZ1Pp3garPaa0WASlJ8PtOano5D6Xmhz6vDtUm4jHdG90A6hkVQPUpmFy/p/yALH30n+NG667V5LzKWMtzxguUIWQnvRuVs1aZNtWoPvzhK0nhGUMivBnAM2Al8TlYDfU8hjUCrCzoXK7YmkYur0Fvb0QacSBtUST1IVkF7PcMlzRmhpHmthVvH1sDijobn+AA4EFxdrQcA5GkatqZkAdC7gO3AJmCzmQ01SPmbK73aol5eb7BNfBLYEjrA4ZAr4nwP9fpaIafdtBS408yOjtLL6y0aYPPK3GlhJnAE+AH4EPgmJOegQWKnbsyyVbTuNNpY3AusSHPlF5TejuwkN4YHOAcMApvJMqLsNrNTBYVbi91cmb08TjwSW/dxsi31Q8BqMxsESPPkFyUkql4fevoW4GA8cAc3Z12o8Ni6k+hdQ67434DvgZXAVjP7r5hDLy0r84iZvXwZN9fNMhA+TwP7yLa5vwB+KSi9EnW0OlArM2tiJdprVxmp4Uusx7wGWBfGsMFRxrBLrPt/TcUcYibNPQkAAAAASUVORK5CYII=");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ------------------------------------------------------------------ */
/* Motores de IA: una tarjeta por modelo que lleva a Vidreum Studio con  */
/* ese motor ya seleccionado (?model=..., ver applyRequestedModel en     */
/* vidreum-studio.js).                                                   */
/* ------------------------------------------------------------------ */

.ai-engines-showcase {
  margin-top: clamp(38px, 6vw, 84px);
  color: #f4f8ff;
}

.ai-engines-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: start;
}

/* El enlace reserva abajo el hueco donde asoma "Vidreum Studio": así, al
   levantarse la tarjeta al pasar el ratón, el texto aparece en ese espacio
   sin mover nada de lo que hay alrededor. */
.ai-engine-card {
  position: relative;
  display: block;
  padding-bottom: 30px;
  text-decoration: none;
}

.ai-engine-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(123, 166, 222, .22);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .3);
  transition: transform .28s cubic-bezier(.19, 1, .22, 1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

/* El vídeo de fondo es el mismo que en /automatizar.html: se queda quieto en
   su fotograma de portada (poster) hasta que el cursor entra en la tarjeta,
   momento en el que dashboard.js le pone play(); al salir vuelve a pausarse.
   Un degradado por encima (siguiente regla) mantiene el texto legible tanto
   en reposo como reproduciéndose. */
.ai-engine-card-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  transition: opacity .35s ease;
}

.ai-engine-card:hover .ai-engine-card-video,
.ai-engine-card:focus-visible .ai-engine-card-video {
  opacity: .62;
}

.ai-engine-card-body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(8, 11, 18, .82), rgba(8, 11, 18, .58));
  pointer-events: none;
}

/* Logo y nombre del motor comparten línea, con el logo delante. */
.ai-engine-card-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-engine-card-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  color: #4d96ff;
  transition: color .25s ease;
}

.ai-engine-card strong {
  position: relative;
  min-width: 0;
  color: #ffffff;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 780;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.ai-engine-card-copy {
  position: relative;
  color: #9ca9b9;
  font-size: 12px;
  line-height: 1.5;
}

.ai-engine-card-reveal {
  position: absolute;
  right: 18px;
  bottom: 4px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6faeff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.19, 1, .22, 1);
}

.ai-engine-card-reveal .icon {
  width: 14px;
  height: 14px;
}

.ai-engine-card:hover .ai-engine-card-body,
.ai-engine-card:focus-visible .ai-engine-card-body {
  transform: translateY(-14px);
  border-color: rgba(105, 171, 255, .55);
  background: linear-gradient(160deg, rgba(36, 93, 255, .16), rgba(0, 168, 255, .05));
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42), 0 0 0 1px rgba(105, 171, 255, .14);
}

.ai-engine-card:hover .ai-engine-card-icon,
.ai-engine-card:focus-visible .ai-engine-card-icon {
  color: #ffffff;
}

.ai-engine-card:hover .ai-engine-card-reveal,
.ai-engine-card:focus-visible .ai-engine-card-reveal {
  opacity: 1;
  transform: translateY(0);
}

.ai-engine-card:focus-visible {
  outline: 2px solid #8fceff;
  outline-offset: 4px;
  border-radius: 18px;
}

@media (max-width: 1100px) {
  .ai-engines-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .ai-engines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .ai-engines-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Sin puntero (móvil/táctil) no hay "pasar el ratón": el enlace a Vidreum
   Studio se muestra siempre para que la tarjeta siga contando a dónde lleva. */
@media (hover: none) {
  .ai-engine-card-reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-engine-card-body,
  .ai-engine-card-reveal { transition: opacity .2s ease !important; }
  .ai-engine-card:hover .ai-engine-card-body,
  .ai-engine-card:focus-visible .ai-engine-card-body { transform: none; }
}

/* Sin tarjeta: el bloque va directamente sobre el fondo de la web. La imagen
   del editor (.video-editor-showcase-stage) conserva su propio marco, que es
   lo que sigue delimitando el contenido. */
.video-editor-showcase {
  position: relative;
  margin-top: clamp(38px, 6vw, 84px);
  color: #f4f8ff;
}

.video-editor-showcase-header {
  display: block;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  text-align: center;
}

.video-editor-showcase-header p {
  margin: 0 0 9px;
  color: #6faeff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .2em;
}

.video-editor-showcase-header h2 {
  max-width: 780px;
  margin: 0 auto;
  color: #f7f9fc;
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.video-editor-showcase-header > div > span {
  display: block;
  max-width: 680px;
  margin: 13px auto 0;
  color: #9ca9b9;
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.55;
}

.video-editor-showcase-cta {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  min-width: 214px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  color: #fff;
  border: 1px solid rgba(105, 171, 255, .7);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 130, 235, .97), rgba(20, 79, 166, .98));
  box-shadow: 0 16px 42px rgba(2, 10, 22, .72), 0 10px 32px rgba(13, 81, 169, .42);
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 11px;
  font-weight: 820;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.video-editor-showcase-cta:hover,
.video-editor-showcase-cta:focus-visible {
  filter: brightness(1.12);
  transform: translate(-50%, -50%) scale(1.035);
  box-shadow: 0 16px 36px rgba(20, 98, 200, .42);
}

.video-editor-showcase-cta .icon { width: 15px; height: 15px; }

.video-editor-showcase-media {
  position: relative;
}

.video-editor-showcase-stage {
  position: relative;
  aspect-ratio: 1901 / 903;
  overflow: hidden;
  border: 1px solid rgba(146, 180, 222, .2);
  border-radius: 15px;
  background: #05070a;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .48);
}

.video-editor-showcase-stage > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: auto;
}

.video-editor-showcase-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgba(2, 5, 9, .6)),
    radial-gradient(circle at 82% 82%, rgba(32, 113, 224, .14), transparent 28%);
}

.video-editor-feature-live {
  position: absolute;
  z-index: 2;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  width: min(350px, calc(100% - 24px));
  padding: 15px 16px 13px;
  overflow: hidden;
  border: 1px solid rgba(128, 180, 245, .25);
  border-radius: 12px;
  background: rgba(8, 13, 20, .88);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
  backdrop-filter: blur(16px);
}

.video-editor-feature-live > small {
  color: #6eaaff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.video-editor-feature-live > strong {
  display: block;
  margin-top: 5px;
  color: #f4f8ff;
  font-size: 15px;
}

.video-editor-feature-live > p {
  min-height: 32px;
  margin: 5px 0 11px;
  color: #9ca9b8;
  font-size: 10px;
  line-height: 1.55;
}

.video-editor-feature-progress {
  height: 2px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.video-editor-feature-progress i {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #3ca8ff, #496cff);
  transform-origin: left center;
  animation: video-editor-feature-progress 4.8s linear both;
}

.video-editor-features {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.video-editor-features button {
  min-width: 0;
  min-height: 66px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #7f8b99;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}

.video-editor-features button:hover,
.video-editor-features button:focus-visible {
  color: #dcecff;
  border-color: rgba(91, 158, 241, .28);
  transform: translateY(-1px);
}

.video-editor-features button.active {
  color: #eef6ff;
  border-color: rgba(76, 156, 255, .42);
  background: linear-gradient(145deg, rgba(34, 105, 193, .25), rgba(24, 45, 72, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 76, 170, .1);
}

.video-editor-features .icon {
  width: 19px;
  height: 19px;
  color: #69aaff;
}

.video-editor-features button > span { min-width: 0; }
.video-editor-features strong,
.video-editor-features small { display: block; overflow: hidden; text-overflow: ellipsis; }
.video-editor-features strong { color: inherit; font-size: 10px; line-height: 1.2; white-space: normal; }
.video-editor-features small { white-space: nowrap; }
.video-editor-features small { margin-top: 3px; color: #657180; font-size: 8px; }
.video-editor-features button.active small { color: #8ba9ce; }

@keyframes video-editor-feature-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 820px) {
  .dashboard-new-button { display: none; }
  .video-editor-showcase-stage { aspect-ratio: 4 / 3; }
  .video-editor-showcase-stage > img { object-position: center; }
  .video-editor-features { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .video-editor-features::-webkit-scrollbar { display: none; }
  .video-editor-features button { min-width: 160px; scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .video-editor-showcase-header h2 { font-size: clamp(29px, 10vw, 42px); }
  .video-editor-showcase-cta { width: min(210px, calc(100% - 34px)); min-width: 0; height: 42px; font-size: 10px; }
  .video-editor-showcase-stage { aspect-ratio: 1901 / 903; }
  .video-editor-showcase-stage > img { object-fit: contain; object-position: center; }
  .video-editor-feature-live {
    position: static;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
  }
  .video-editor-feature-live > p { min-height: 0; }
  .video-editor-features {
    margin-right: -13px;
    padding-right: 13px;
    scroll-padding-right: 13px;
    overscroll-behavior-inline: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-editor-feature-progress i { animation: none; }
}

/* Apartado "Editor de imágenes": bento grid con capturas reales del editor
   (panel de capas, herramientas de dibujo, riel de navegación y biblioteca
   de recursos). Reutiliza la misma piel visual que .video-editor-showcase
   (mismo borde/gradiente/sombra) para quedar coherente con el apartado de
   arriba, y añade inclinación 3D al pasar el cursor + una animación de
   flotación sutil (ver dashboard.js) para dar sensación de fluidez.
   `perspective` en el contenedor + `transform-style: preserve-3d` por
   tarjeta son lo que permite el efecto de inclinación. */
.image-editor-showcase {
  position: relative;
  margin-top: clamp(28px, 4vw, 46px);
  padding: clamp(18px, 2.7vw, 34px);
  overflow: hidden;
  color: #f4f8ff;
  border: 1px solid rgba(123, 166, 222, .2);
  border-radius: 20px;
  background-color: #0a0d13;
  /* Velo negro muy leve sobre la foto de fondo: lo justo para que el texto
     que va encima se lea sobre las zonas cromadas más claras, sin apagar la
     imagen como hacía el degradado anterior (que llegaba al 82%). */
  background-image:
    radial-gradient(circle at 12% 88%, rgba(38, 114, 219, .22), transparent 32%),
    linear-gradient(145deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .55) 68%),
    url('./assets/image-editor-showcase-bg.avif?v=1');
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.image-editor-showcase-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.image-editor-showcase-header p {
  margin: 0 0 9px;
  color: #6faeff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .2em;
}

.image-editor-showcase-header h2 {
  max-width: 620px;
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.image-editor-showcase-header > div > span {
  display: block;
  max-width: 560px;
  margin: 11px 0 0;
  color: #9ca9b9;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.55;
}

.image-editor-showcase-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  color: #fff;
  border: 1px solid rgba(105, 171, 255, .7);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 130, 235, .97), rgba(20, 79, 166, .98));
  box-shadow: 0 16px 42px rgba(2, 10, 22, .5), 0 10px 32px rgba(13, 81, 169, .32);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.image-editor-showcase-cta:hover,
.image-editor-showcase-cta:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px) scale(1.02);
}

.image-editor-showcase-cta .icon { width: 15px; height: 15px; }

.image-editor-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  perspective: 1600px;
}

.ie-card {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .3);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0;
  transform: translateY(24px) rotateX(var(--ie-tilt-x, 0deg)) rotateY(var(--ie-tilt-y, 0deg)) scale(var(--ie-tilt-scale, 1));
  transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s ease, border-color .3s ease, box-shadow .3s ease;
}

.ie-card.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(var(--ie-tilt-x, 0deg)) rotateY(var(--ie-tilt-y, 0deg)) scale(var(--ie-tilt-scale, 1));
}

.ie-card:hover {
  border-color: rgba(105, 171, 255, .35);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(105, 171, 255, .12);
}

.ie-card .icon { width: 22px; height: 22px; color: #69aaff; }

/* Icono junto al título de la tarjeta intro: blanco, como las letras a las
   que acompaña. */
.ie-card-intro-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ie-card-intro-heading .icon {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
}

/* Título "hielo" 3D (estilo referencia "Swim"), reutilizable con la clase
   .ie-glossy-title: relleno degradado de blanco (abajo) a azul (arriba),
   contorno oscuro (-webkit-text-stroke) para marcar el borde como una
   pegatina/cromo, extrusión DIAGONAL (no solo hacia abajo) apilando muchos
   pasos de sombra en la misma dirección para que se lea como bloque 3D con
   grosor real (una sombra puramente vertical se ve como un simple
   drop-shadow, no como 3D), y un brillo diagonal tipo cristal/hielo
   superpuesto (::after). Requiere el atributo data-title="mismo texto" en
   el elemento (lo usa el ::after). Los navegadores sin background-clip:text
   caen a un azul plano legible. */
.ie-glossy-title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  /* Mismo azul "neón" que .desktop-neon-text (marca Vidreum.ai): #245dff /
     #00a8ff, aquí en vertical simple de azul (arriba) a blanco (abajo).
     El degradado se pinta sobre la caja de línea completa, no sobre el
     glifo — con line-height suelto, el tramo blanco (el final del
     degradado) caía en el espacio vacío bajo la letra y nunca se veía.
     line-height:1 hace que la caja coincida con la letra, y adelantar el
     blanco a partir del 60% deja bastante blanco realmente visible. */
  color: #eaf6ff;
  background: linear-gradient(to bottom, #245dff 0%, #00a8ff 25%, #d9f0ff 55%, #ffffff 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Un contorno grueso y oscuro "comía" el degradado en una fuente ya de por
     sí muy gruesa como Baloo 2 — más fino y claro, como el otro efecto
     "chrome" del proyecto (.sample-chrome), deja ver el degradado entero. */
  -webkit-text-stroke: .5px rgba(217, 240, 255, .9);
  font-family: 'Baloo 2', Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
  text-shadow:
    1px 1px 0 #1c63cf,
    2px 2px 0 #1857b8,
    3px 3px 0 #144aa1,
    4px 4px 0 #103e8a,
    5px 5px 0 #0c3273,
    6px 6px 0 #08265c,
    7px 7px 0 #051c47,
    9px 10px 16px rgba(2, 8, 24, .65),
    0 0 30px rgba(90, 170, 255, .45);
}

/* Blanco liso y con la tipografía general de la web (heredada del body):
   sin relieve 3D, sin degradado y sin la fuente redondeada. */
.ie-card h3 {
  margin: 12px 0 6px;
  color: #ffffff;
  font-size: 21px;
  letter-spacing: -.02em;
}

.ie-glossy-title::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .95) 45%, rgba(255, 255, 255, .2) 54%, transparent 66%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ie-glossy-title { color: #6fb4ff; background: none; text-shadow: none; -webkit-text-stroke: 0; }
  .ie-glossy-title::after { content: none; }
}

@media (min-width: 901px) {
  .ie-card h3 { font-size: 27px; }
  .ie-card-layers h3 { font-size: 36px; }
}

.ie-card p {
  margin: 0;
  overflow-wrap: break-word;
  color: #9ca9b9;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Los hijos de un grid no se encogen por debajo de su ancho de contenido a
   menos que se fuerce min-width:0 — sin esto, en móvil el texto se salía
   del borde de la tarjeta (overflow:hidden lo recortaba a media palabra en
   vez de hacer salto de línea). */
.ie-card-copy,
.ie-card-visual {
  min-width: 0;
}

.ie-card-intro {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
}

.ie-card-canvas {
  grid-column: span 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(58, 140, 255, .18), transparent 38%),
    linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
}

.ie-card-canvas .ie-card-copy { order: 2; }
.ie-card-canvas .ie-card-visual { order: 1; }

.ie-card-layers {
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  background:
    radial-gradient(circle at 90% 90%, rgba(122, 92, 255, .16), transparent 40%),
    linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
}

.ie-card-layers .ie-card-visual { max-width: 260px; margin-left: 32px; }

.ie-card-layers .image-editor-showcase-cta { margin-top: 18px; }

.ie-card-visual {
  position: relative;
  border-radius: 12px;
}

.ie-card-visual img {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

/* Las imágenes se quedan quietas, solo con su inclinación fija: antes
   subían y bajaban en bucle con una animación. */
.ie-card-canvas .ie-card-visual img { transform: rotate(-2deg); }
.ie-card-layers .ie-card-visual img { transform: rotate(2deg); }

/* La captura del riel es muy alargada (8 iconos apilados); sin límite de
   altura crecía sin control y en móvil llegaba a tapar el texto de debajo
   de la tarjeta. Se recorta a un tamaño de "chip" fijo mostrando solo los
   primeros iconos (object-fit: cover + object-position: top). */
/* 6 iconos en escritorio (visual + copy van en columnas separadas, así que
   un chip alto no puede taparle texto a nada). En móvil el bento se apila en
   una sola columna y el copy queda justo debajo de la imagen, así que ahí se
   recorta a una altura seguro menor (ver media query 900px más abajo) para
   no repetir el solape que tapaba el texto. */
.ie-card-chip {
  position: absolute;
  top: -10px;
  right: -14px;
  z-index: 2;
  width: 74px;
  height: 440px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(9, 13, 20, .92);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  transform: rotate(6deg);
}

.ie-card-chip img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 900px) {
  .image-editor-showcase-header { flex-direction: column; align-items: flex-start; }
  .ie-card-intro,
  .ie-card-canvas,
  .ie-card-layers { grid-column: span 12; }
  .ie-card-canvas,
  .ie-card-layers { grid-template-columns: minmax(0, 1fr); }
  .ie-card-canvas .ie-card-visual,
  .ie-card-canvas .ie-card-copy { order: initial; }
  .ie-card-visual img { max-width: 260px; margin: 0 auto; }
  .ie-card-layers .ie-card-visual { max-width: 260px; margin: 0 auto; }
  /* El "chip" con el riel de herramientas es decorativo y aquí, con el bento
     ya en una sola columna, se solapa con la imagen del lienzo y se ve
     cortado por el borde de la tarjeta. En pantallas pequeñas se oculta. */
  .ie-card-chip { display: none; }
}

@media (max-width: 560px) {
  .image-editor-showcase { padding: 13px; border-radius: 14px; }
  .image-editor-showcase-header h2 { font-size: clamp(23px, 8vw, 30px); }
  .image-editor-showcase-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ie-card { animation: none !important; transition: opacity .3s ease !important; transform: none !important; }
  .ie-card.is-visible { opacity: 1; }
}

.gallery-marquee {
  position: relative;
  width: 100%;
  min-height: clamp(206px, 22vw, 316px);
  padding: 8px 0;
  overflow: hidden;
  border-top: 1px solid #292d33;
  border-bottom: 1px solid #292d33;
  background: #090b0e;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.gallery-marquee.is-ready {
  cursor: grab;
}

.gallery-marquee.is-dragging {
  cursor: grabbing;
}

.gallery-track {
  --gallery-duration: 90s;
  width: max-content;
  display: flex;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  touch-action: pan-y;
  user-select: none;
  will-change: transform;
}

.gallery-marquee.is-ready .gallery-track {
  animation: gallery-glide-right var(--gallery-duration) linear infinite;
}

.gallery-marquee:hover .gallery-track,
.gallery-marquee:focus-within .gallery-track {
  animation-play-state: paused;
}

.gallery-marquee.is-dragging .gallery-track {
  animation-play-state: paused;
}

.gallery-marquee.is-dragging .gallery-item {
  pointer-events: none;
}

.gallery-set {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-right: 8px;
}

.gallery-item {
  height: clamp(190px, 22vw, 300px);
  flex: 0 0 auto;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  appearance: none;
  border: 1px solid #30343b;
  border-radius: 7px;
  outline: none;
  background: #101318;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.gallery-item img {
  width: auto;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: filter 180ms ease;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  border-color: rgba(255, 255, 255, .82);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .38),
    0 0 18px rgba(255, 255, 255, .2),
    0 14px 30px rgba(0, 0, 0, .34);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  filter: brightness(1.06);
}

.gallery-status {
  margin: 9px 0 0;
  min-height: 14px;
  color: #a9aab4;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.gallery-cta {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.gallery-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  color: #f8faff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid rgba(119, 154, 207, .34);
  border-radius: 999px;
  background: linear-gradient(135deg, #151a22 0%, #0a0d13 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .32);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.gallery-cta-button .icon {
  width: 16px;
  height: 16px;
  color: #6da9ff;
}

.gallery-cta-button:hover,
.gallery-cta-button:focus-visible {
  color: #fff;
  border-color: #5c9dff;
  outline: none;
  background: linear-gradient(135deg, #1a2130 0%, #0a0d13 100%);
  box-shadow: 0 0 22px rgba(41, 121, 255, .38), 0 16px 36px rgba(0, 0, 0, .4);
  transform: translateY(-1px);
}

/* Pie de página */
.site-footer {
  position: relative;
  margin-top: 64px;
  padding: 36px 0 0;
  border-top: 1px solid #272c34;
  color: #f4f6fa;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: min(190px, 34vw);
  height: 1px;
  background: #4c94ff;
  box-shadow: 0 0 16px 2px rgba(37, 118, 255, .52);
}

.site-footer-main,
.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer-main {
  padding-bottom: 28px;
}

.site-footer-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f7f9fc;
  text-decoration: none;
}

.site-footer-logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 0 5px rgba(95, 163, 225, .32));
}

.site-footer-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.site-footer-brand > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.site-footer-brand strong {
  font-size: 17px;
  font-weight: 780;
}

.site-footer-brand strong span {
  color: #679cf0;
  font-weight: 500;
}

.site-footer-brand small {
  color: #838b98;
  font-size: 9px;
  font-weight: 700;
}

.site-footer-socials {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-footer-socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #d8dde6;
  border: 1px solid #303743;
  border-radius: 50%;
  outline: none;
  background: #10141a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 9px 22px rgba(0, 0, 0, .28);
  text-decoration: none;
}

.site-footer-socials a:hover,
.site-footer-socials a:focus-visible {
  color: #fff;
  border-color: #5a9dff;
  background: #14233b;
  box-shadow: 0 0 0 1px rgba(73, 145, 255, .24), 0 0 18px rgba(32, 112, 245, .48), 0 10px 24px rgba(0, 0, 0, .38);
  transform: translateY(-2px);
}

.social-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer-bottom {
  min-height: 76px;
  padding: 15px 0;
  border-top: 1px solid #222730;
  color: #747d8a;
  font-size: 9px;
}

.site-footer-legal-wrap {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.site-footer-legal-wrap > strong {
  color: #dce1e9;
  font-size: 8px;
  font-weight: 760;
}

.site-footer-bottom > span {
  flex: 0 0 auto;
  align-self: flex-end;
}

.site-footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 20px;
}

.site-footer-legal button {
  margin: 0;
  padding: 0;
  color: #969eaa;
  border: 0;
  background: transparent;
  font-size: 8px;
  font-weight: 650;
  cursor: pointer;
}

.site-footer-legal button:hover,
.site-footer-legal button:focus-visible {
  color: #70a9ff;
  outline: none;
  text-shadow: 0 0 11px rgba(64, 140, 255, .48);
}

/* Centro legal */
.legal-view[hidden] {
  display: none;
}

.legal-view {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  color: #f3f5f8;
  background: #080a0d;
}

.legal-topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 64px;
  border-bottom: 1px solid #272c34;
  background: rgba(8, 10, 13, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.legal-topbar-inner {
  width: min(1180px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.legal-back-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #c6cbd4;
  border: 1px solid #303640;
  border-radius: 6px;
  background: #12161c;
  cursor: pointer;
}

.legal-back-button:hover,
.legal-back-button:focus-visible {
  color: #fff;
  border-color: #599bff;
  outline: none;
  box-shadow: 0 0 15px rgba(39, 119, 244, .36);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f7f8fb;
  text-decoration: none;
}

.legal-brand > span:first-child {
  width: 38px;
  height: 38px;
  overflow: visible;
  border-radius: 0;
}

.legal-brand img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.legal-brand strong {
  font-size: 16px;
}

.legal-brand strong span {
  color: #679cf0;
  font-weight: 500;
}

.legal-topbar-label {
  margin-left: auto;
  color: #858e9b;
  font-size: 8px;
  font-weight: 750;
}

.legal-main {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.legal-hero {
  padding: 56px 0 34px;
}

.legal-hero > p {
  margin: 0 0 10px;
  color: #579bff;
  font-size: 9px;
  font-weight: 850;
}

.legal-hero h1 {
  max-width: 800px;
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.04;
}

.legal-hero > span {
  max-width: 720px;
  margin-top: 15px;
  display: block;
  color: #9aa2ad;
  font-size: 13px;
  line-height: 1.65;
}

.legal-meta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-meta span {
  padding: 6px 9px;
  color: #aeb7c4;
  border: 1px solid #2c333e;
  border-radius: 5px;
  background: #10141a;
  font-size: 9px;
  font-weight: 700;
}

.legal-meta span:last-child {
  color: #72a9ff;
  border-color: rgba(74, 144, 249, .44);
  box-shadow: 0 0 13px rgba(30, 102, 215, .18);
}

.legal-tabs {
  position: sticky;
  z-index: 35;
  top: 64px;
  display: flex;
  overflow-x: auto;
  border-top: 1px solid #272c34;
  border-bottom: 1px solid #272c34;
  background: rgba(8, 10, 13, .94);
  scrollbar-width: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.legal-tabs::-webkit-scrollbar {
  display: none;
}

.legal-tabs button {
  position: relative;
  min-height: 54px;
  flex: 0 0 auto;
  padding: 0 16px;
  color: #929aa6;
  border: 0;
  background: transparent;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.legal-tabs button::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: -1px;
  left: 16px;
  height: 2px;
  background: #4d94ff;
  box-shadow: 0 0 12px rgba(49, 126, 247, .72);
  opacity: 0;
}

.legal-tabs button:hover,
.legal-tabs button:focus-visible {
  color: #dbe2ed;
  outline: none;
}

.legal-tabs button.is-active {
  color: #fff;
}

.legal-tabs button.is-active::after {
  opacity: 1;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
}

.legal-index {
  position: sticky;
  top: 118px;
  max-height: calc(100dvh - 118px);
  padding: 38px 30px 54px 0;
  overflow-y: auto;
  border-right: 1px solid #252a32;
}

.legal-index > span {
  display: block;
  margin-bottom: 14px;
  color: #5d97ee;
  font-size: 8px;
  font-weight: 850;
}

.legal-index nav {
  display: grid;
  gap: 3px;
}

.legal-index button {
  width: 100%;
  padding: 9px 10px;
  color: #8d96a3;
  border: 0;
  border-left: 1px solid transparent;
  background: transparent;
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.legal-index button:hover,
.legal-index button:focus-visible,
.legal-index button.is-active {
  color: #fff;
  border-left-color: #5b9dff;
  outline: none;
  background: rgba(47, 110, 207, .1);
  text-shadow: 0 0 10px rgba(67, 140, 255, .32);
}

.legal-document {
  min-width: 0;
  max-width: 820px;
  padding: 42px 0 90px 54px;
}

.legal-document-header {
  margin-bottom: 42px;
  padding-bottom: 28px;
  border-bottom: 1px solid #252b34;
}

.legal-document-header h2 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 26px;
}

.legal-document-header p {
  margin: 0;
  color: #a7afba;
  font-size: 13px;
  line-height: 1.72;
}

.legal-document-note {
  margin-top: 20px;
  padding: 13px 15px;
  color: #b9c8dd;
  border: 1px solid rgba(72, 142, 248, .4);
  border-radius: 6px;
  background: rgba(28, 78, 155, .1);
  box-shadow: 0 0 18px rgba(23, 91, 199, .1);
  font-size: 10px;
  line-height: 1.6;
}

.legal-document-section {
  padding: 0 0 36px;
  scroll-margin-top: 142px;
}

.legal-document-section + .legal-document-section {
  padding-top: 34px;
  border-top: 1px solid #222730;
}

.legal-document-section h3 {
  margin: 0 0 16px;
  color: #f8f9fb;
  font-size: 18px;
}

.legal-document-section p,
.legal-document-section li {
  color: #b5bbc5;
  font-size: 12px;
  line-height: 1.78;
}

.legal-document-section p {
  margin: 0 0 14px;
}

.legal-document-section p:last-child {
  margin-bottom: 0;
}

.legal-document-list {
  margin: 14px 0 0;
  padding-left: 18px;
}

.legal-document-list li + li {
  margin-top: 8px;
}

.legal-site-footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 10px;
}

body.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f7f9ff;
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, .62);
  backdrop-filter: blur(5px) saturate(.9);
  -webkit-backdrop-filter: blur(5px) saturate(.9);
}

.gallery-lightbox-window {
  position: relative;
  width: var(--gallery-dialog-width, min(700px, calc(100vw - 48px)));
  height: var(--gallery-dialog-height, min(620px, calc(100dvh - 48px)));
  min-width: min(280px, calc(100vw - 48px));
  min-height: min(260px, calc(100dvh - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: linear-gradient(145deg, #10141b 0%, #07090d 60%, #0a0d13 100%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .76);
  animation: gallery-lightbox-enter 180ms ease-out both;
}

.gallery-lightbox-header {
  min-width: 0;
  padding: 0 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(105, 149, 212, .22);
  background: rgba(15, 18, 24, .92);
}

.gallery-lightbox-heading {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.gallery-lightbox-heading span {
  color: #6da9ff;
  font-size: 9px;
  font-weight: 850;
}

.gallery-lightbox-heading strong {
  overflow: hidden;
  color: #f8faff;
  font-size: 15px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gallery-lightbox-action {
  display: grid;
  place-items: center;
  color: #cad3e2;
  border: 1px solid rgba(119, 154, 207, .26);
  background: #151a22;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.gallery-lightbox-action {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  text-decoration: none;
}

.gallery-lightbox-action:hover,
.gallery-lightbox-action:focus-visible {
  color: #fff;
  border-color: #5c9dff;
  outline: none;
  background: #17243a;
  box-shadow: 0 0 16px rgba(41, 121, 255, .48), 0 8px 22px rgba(0, 0, 0, .34);
}

.gallery-lightbox-stage {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.gallery-lightbox-figure {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.gallery-lightbox-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  border: none;
  border-radius: 6px;
  background: #030509;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .48);
}

.gallery-lightbox-image-frame img,
.gallery-lightbox-image-frame video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  opacity: 1;
  transition: opacity 160ms ease;
}

/* Oculta el botón de "más opciones" (los tres puntos) del reproductor nativo. */
.gallery-lightbox-image-frame video::-webkit-media-controls-overflow-button,
.gallery-lightbox-image-frame video::-internal-media-controls-overflow-button {
  display: none !important;
}

.gallery-lightbox-status {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #b8c6da;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gallery-lightbox.is-loading .gallery-lightbox-image-frame img {
  opacity: .16;
}

.gallery-lightbox.is-loading .gallery-lightbox-status,
.gallery-lightbox.has-error .gallery-lightbox-status,
.gallery-lightbox-status.is-visible {
  opacity: 1;
}

.gallery-lightbox-action:disabled,
.gallery-lightbox-action.is-busy {
  opacity: .5;
  cursor: wait;
}

/* El visor de modos creativos combina la referencia con una accion directa. */
#creativeModeLightboxWindow {
  width: min(1120px, calc(100vw - 48px));
  height: min(720px, calc(100dvh - 48px));
}

#creativeModeLightbox .creative-mode-lightbox-stage {
  padding: 16px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  align-items: stretch;
  gap: 18px;
}

#creativeModeLightbox .creative-mode-lightbox-figure {
  min-height: 0;
}

#creativeModeLightbox .gallery-lightbox-image-frame {
  padding: 10px;
}

#creativeModeLightbox .gallery-lightbox-image-frame > video {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

#creativeModeLightboxWindow[data-preview-layout="portrait"] {
  width: min(900px, calc(100vw - 48px));
}

#creativeModeLightboxWindow[data-preview-layout="portrait"] .creative-mode-lightbox-stage {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
}

#creativeModeLightboxWindow[data-preview-layout="portrait"] .creative-mode-lightbox-figure {
  display: grid;
  place-items: center;
}

#creativeModeLightboxWindow[data-preview-layout="portrait"] .gallery-lightbox-image-frame {
  width: auto;
  height: 100%;
  max-width: 100%;
  padding: 0;
  aspect-ratio: var(--creative-preview-aspect, 3 / 4);
}

#creativeModeLightboxWindow[data-preview-layout="portrait"] .gallery-lightbox-image-frame > img,
#creativeModeLightboxWindow[data-preview-layout="portrait"] .gallery-lightbox-image-frame > video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.creative-mode-lightbox-comparison {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050609;
  isolation: isolate;
}

.creative-mode-lightbox-comparison > img,
.creative-mode-lightbox-comparison-after,
.creative-mode-lightbox-comparison-after > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.creative-mode-lightbox-comparison > img,
.creative-mode-lightbox-comparison-after > img {
  display: block;
  object-fit: cover;
  object-position: center top;
}

.creative-mode-lightbox-comparison-after {
  overflow: hidden;
  clip-path: inset(0 0 0 var(--creative-mode-compare));
}

.creative-mode-lightbox-comparison-label {
  position: absolute;
  z-index: 3;
  top: 12px;
  padding: 5px 7px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 4px;
  background: rgba(4, 7, 12, .64);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
}

.creative-mode-lightbox-comparison-label-before {
  left: 12px;
}

.creative-mode-lightbox-comparison-label-after {
  right: 12px;
}

.creative-mode-lightbox-comparison-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--creative-mode-compare);
  width: 1px;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, .55);
  pointer-events: none;
}

.creative-mode-lightbox-comparison-divider > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #0d131b;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  transform: translate(-50%, -50%);
}

.creative-mode-lightbox-comparison-divider .icon {
  width: 17px;
  height: 17px;
  transform: rotate(180deg);
}

.creative-mode-lightbox-comparison > input {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.creative-mode-lightbox-comparison:focus-within .creative-mode-lightbox-comparison-divider > span {
  box-shadow: 0 0 0 3px rgba(101, 179, 255, .62), 0 8px 22px rgba(0, 0, 0, .38);
}

.creative-mode-lightbox-details {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(105, 149, 212, .22);
  background: rgba(10, 13, 18, .78);
}

.creative-mode-lightbox-details > span {
  color: #6da9ff;
  font-size: 9px;
  font-weight: 850;
}

.creative-mode-lightbox-details p {
  margin: 12px 0 0;
  color: #c2ccda;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.55;
}

.creative-mode-lightbox-start {
  width: 100%;
  min-height: 48px;
  margin-top: 26px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #07101b;
  border: 1px solid #f5f8ff;
  border-radius: 6px;
  background: #f5f8ff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.creative-mode-lightbox-start:hover,
.creative-mode-lightbox-start:focus-visible {
  outline: none;
  background: #cce7ff;
  box-shadow: 0 0 0 2px rgba(101, 179, 255, .46), 0 12px 30px rgba(0, 0, 0, .32);
  transform: translateY(-1px);
}

.creative-mode-lightbox-start:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.creative-mode-lightbox-start .icon {
  width: 16px;
  height: 16px;
}

@keyframes gallery-lightbox-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gallery-glide-right {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox-window {
    animation: none;
  }

  .gallery-marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .gallery-track {
    animation: none !important;
    transform: none !important;
  }

  .gallery-set[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 720px) {
  .gallery-lightbox {
    padding: 8px;
  }

  .gallery-lightbox-window {
    min-width: min(280px, calc(100vw - 16px));
    min-height: min(260px, calc(100dvh - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    grid-template-rows: 60px minmax(0, 1fr);
  }

  .gallery-lightbox-header {
    padding: 0 10px 0 13px;
    gap: 8px;
  }

  .gallery-lightbox-heading strong {
    font-size: 13px;
  }

  .gallery-lightbox-action {
    width: 34px;
    height: 34px;
  }

  .gallery-lightbox-stage {
    padding: 10px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #creativeModeLightboxWindow {
    width: calc(100vw - 16px);
    height: min(760px, calc(100dvh - 16px));
  }

  #creativeModeLightboxWindow[data-preview-layout="portrait"] {
    width: calc(100vw - 16px);
  }

  #creativeModeLightbox .creative-mode-lightbox-stage {
    padding: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
  }

  #creativeModeLightboxWindow[data-preview-layout="portrait"] .creative-mode-lightbox-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  #creativeModeLightbox .creative-mode-lightbox-figure {
    height: clamp(190px, 48dvh, 390px);
  }

  #creativeModeLightboxWindow[data-preview-layout="portrait"] .creative-mode-lightbox-figure {
    height: clamp(260px, 52dvh, 450px);
  }

  .creative-mode-lightbox-details {
    padding: 17px;
    justify-content: flex-start;
    border-top: 1px solid rgba(105, 149, 212, .22);
    border-left: 0;
  }

  .creative-mode-lightbox-details p {
    font-size: 13px;
  }

  .creative-mode-lightbox-start {
    min-height: 44px;
    margin-top: 17px;
  }

  .site-footer {
    margin-top: 48px;
    padding-top: 30px;
  }

  .site-footer-main,
  .site-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer-main {
    gap: 22px;
  }

  .site-footer-bottom {
    gap: 13px;
  }

  .site-footer-socials {
    width: 100%;
    justify-content: flex-start;
  }

  .site-footer-legal {
    gap: 10px 18px;
  }

  .legal-topbar-inner,
  .legal-main,
  .legal-site-footer {
    width: calc(100% - 32px);
  }

  .legal-topbar-label {
    display: none;
  }

  .legal-hero {
    padding: 38px 0 28px;
  }

  .legal-hero h1 {
    font-size: 31px;
  }

  .legal-tabs button {
    min-height: 50px;
    padding: 0 12px;
  }

  .legal-tabs button::after {
    right: 12px;
    left: 12px;
  }

  .legal-layout {
    display: block;
  }

  .legal-index {
    position: relative;
    top: auto;
    max-height: none;
    padding: 22px 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid #252a32;
  }

  .legal-index nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .legal-index nav::-webkit-scrollbar {
    display: none;
  }

  .legal-index button {
    width: auto;
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid #2a3039;
    border-radius: 5px;
    white-space: nowrap;
  }

  .legal-index button:hover,
  .legal-index button:focus-visible,
  .legal-index button.is-active {
    border-color: #4e91f5;
  }

  .legal-document {
    max-width: none;
    padding: 32px 0 64px;
  }

  .legal-document-header h2 {
    font-size: 22px;
  }

  .legal-document-section {
    scroll-margin-top: 128px;
  }

  .legal-site-footer {
    padding-bottom: 18px;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .legal-index {
    padding-right: 20px;
  }

  .legal-document {
    padding-left: 36px;
  }
}

/* Estudio para imagen a vídeo, restauración y texto a imagen */
.mode-studio {
  min-height: 100vh;
  color: #f4f5f7;
  background: #080a0d;
}

/* El editor es una vista de pantalla completa. Impide que el documento o la
   portada que quedan detrás puedan desplazarse y asomarse bajo el estudio. */
body:has(#modeEditorView:not([hidden])) {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
}

#modeEditorView:not([hidden]) {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.mode-studio-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 66px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #262a31;
  background: rgba(8, 10, 13, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
}

.mode-studio .brand {
  color: #f6f7f9;
}

.mode-studio-top-actions,
.mode-studio-account,
.mode-studio-credit,
.mode-studio-profile {
  display: flex;
  align-items: center;
}

.mode-studio-top-actions {
  min-width: 0;
  margin-left: auto;
  gap: 9px;
}

.mode-studio-account {
  gap: 8px;
}

.mode-studio-account[hidden] {
  display: none;
}

.mode-studio-credit,
.mode-studio-profile {
  appearance: none;
  height: 38px;
  border: 1px solid #303946;
  border-radius: 999px;
  color: #dce4ee;
  background: linear-gradient(145deg, rgba(29, 34, 42, .96), rgba(11, 14, 19, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 0, 0, .22);
  font: inherit;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.mode-studio-credit:hover,
.mode-studio-profile:hover {
  border-color: rgba(83, 173, 255, .72);
  background: linear-gradient(145deg, rgba(31, 48, 68, .98), rgba(11, 17, 26, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px rgba(35, 149, 255, .2), 0 10px 24px rgba(0, 0, 0, .3);
  transform: translateY(-1px);
}

.mode-studio-credit:active,
.mode-studio-profile:active {
  transform: translateY(0);
}

.mode-studio-credit:focus-visible,
.mode-studio-profile:focus-visible {
  outline: 2px solid #52adff;
  outline-offset: 3px;
}

.mode-studio-credit {
  padding: 0 12px 0 10px;
  gap: 6px;
}

.mode-studio-credit .credit-icon {
  width: 17px;
  height: 17px;
}

.mode-studio-credit strong {
  color: #f5f9ff;
  font-size: 12px;
}

.mode-studio-credit span {
  color: #8794a3;
  font-size: 9px;
  font-weight: 700;
}

.mode-studio-profile {
  max-width: 210px;
  padding: 3px 3px 3px 13px;
  gap: 10px;
}

.mode-profile-name {
  max-width: 145px;
  overflow: hidden;
  color: #e8edf4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-profile-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 181, 255, .55);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #215de7, #7047de 58%, #159dd7);
  box-shadow: 0 0 14px rgba(54, 130, 255, .24);
  font-size: 9px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .mode-engine-status {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .mode-engine-status strong {
    display: none;
  }
}

@media (max-width: 720px) {
  .mode-studio-credit {
    padding: 0 9px;
  }

  .mode-studio-credit span,
  .mode-profile-name {
    display: none;
  }

  .mode-studio-profile {
    padding: 3px;
  }
}

.mode-switcher {
  position: sticky;
  z-index: 29;
  top: 66px;
  height: 48px;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #242a33;
  background: rgba(9, 12, 17, .92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
  container-type: inline-size;
}

.mode-switcher-viewport,
.mode-switcher-track,
.mode-switcher-set {
  width: 100%;
  height: 100%;
}

.mode-switcher-viewport {
  overflow: hidden;
}

.mode-switcher-track {
  display: block;
}

.mode-switcher-set {
  padding: 6px 8px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

#danceModeSwitcher .mode-switcher-set {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.mode-switcher-set button {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 3px clamp(2px, .65cqw, 12px);
  border: 1px solid #303947;
  border-radius: 999px;
  color: #9da8b6;
  background: rgba(14, 18, 25, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(6px, .72vw, 10px);
  font-size: clamp(6px, .72cqw, 10px);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: clamp(0, .025cqw, .025em);
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mode-switcher-set button:hover {
  border-color: rgba(93, 166, 255, .66);
  color: #edf8ff;
  background: rgba(28, 52, 87, .88);
  box-shadow: inset 0 0 22px rgba(36, 116, 255, .18);
}

.mode-switcher-set button.is-active {
  border-color: rgba(106, 193, 255, .78);
  color: #fff;
  background: linear-gradient(105deg, rgba(25, 94, 220, .94), rgba(77, 61, 205, .94) 58%, rgba(17, 144, 207, .94));
  box-shadow: inset 0 0 24px rgba(91, 188, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mode-switcher-set button:focus-visible {
  outline: 2px solid #b9ebff;
  outline-offset: 2px;
}

.mode-switcher-set button:disabled {
  opacity: .55;
  cursor: wait;
}

.mode-engine-status {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2e343d;
  border-radius: 999px;
  color: #adb3bc;
  background: #101319;
  font-size: 10px;
}

.mode-engine-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fc6a1;
  box-shadow: 0 0 10px rgba(95, 198, 161, .58);
}

.mode-engine-status.processing > span,
.mode-engine-status.rendering > span {
  background: #78a9e0;
  animation: statusPulse 1s ease-in-out infinite;
}

.mode-studio-workspace {
  min-height: calc(100vh - 114px);
  display: grid;
  grid-template-columns: minmax(480px, 560px) minmax(0, 1fr);
}

.mode-controls {
  min-width: 0;
  border-right: 1px solid #252930;
  background: #0b0d11;
}

.mode-controls-inner {
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  padding: 16px 22px;
}

.mode-editor-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid #242830;
}

.mode-editor-heading h1 {
  color: #f7f8fa;
  font-size: clamp(29px, 2.7vw, 36px);
  line-height: 1;
}

.mode-editor-heading > span {
  max-width: 410px;
  margin-top: 8px;
  display: block;
  color: #8f96a0;
  font-size: 10px;
  line-height: 1.42;
}

.mode-form {
  margin: 0;
}

.mode-form-section {
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #242830;
}

.mode-form-section legend {
  margin: 0 0 7px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e9ebee;
  font-size: 11px;
  font-weight: 800;
}

.mode-form-section legend > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #39414c;
  border-radius: 50%;
  color: #9ca5b0;
  background: #13171d;
  font-size: 11px;
}

.mode-form-section legend .mode-section-optional {
  margin-left: auto;
  color: #6f7c8b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mode-upload-zone {
  min-height: 58px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px dashed #3a424d;
  border-radius: 7px;
  background: #11151a;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.mode-upload-zone:hover,
.mode-upload-zone.dragging,
.mode-upload-zone.has-file {
  border-color: #6286ae;
  background: #141a22;
}

.mode-upload-zone > span:nth-child(3) {
  min-width: 0;
}

.mode-upload-zone strong,
.mode-upload-zone small {
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-upload-zone strong {
  color: #eceef1;
  font-size: 11px;
}

.mode-upload-zone small {
  margin-top: 3px;
  color: #7e8792;
  font-size: 11px;
}

.mode-upload-zone > b {
  padding: 8px 10px;
  border: 1px solid #34465d;
  border-radius: 5px;
  color: #dce6f2;
  background: #10213a;
  font-size: 11px;
}

.mode-reference-picker.is-full {
  border-color: #3d4b5c;
  cursor: not-allowed;
}

.mode-reference-picker:focus-visible {
  border-color: #6e9ed3;
  outline: 2px solid rgba(110, 158, 211, .22);
  outline-offset: 2px;
}

.mode-reference-picker.is-full > b {
  border-color: #37414e;
  color: #8e99a6;
  background: #171c23;
}

.mode-reference-meta {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: #747d89;
  font-size: 9px;
  line-height: 1.45;
}

.mode-reference-meta p {
  max-width: 330px;
  margin: 0;
}

.mode-reference-meta span {
  flex: 0 0 auto;
  color: #9aa8b8;
  font-weight: 750;
}

.mode-reference-list {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.mode-reference-list[hidden] {
  display: none;
}

.mode-reference-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid #333b46;
  border-radius: 7px;
  background: #11151a;
}

.mode-reference-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mode-reference-order {
  position: absolute;
  top: 5px;
  left: 5px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #f5f8fc;
  background: rgba(7, 10, 15, .72);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .05em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .24);
  backdrop-filter: blur(8px);
}

.mode-reference-item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 6px 5px;
  overflow: hidden;
  color: #f1f5f9;
  background: linear-gradient(transparent, rgba(5, 8, 12, .86));
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.mode-reference-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 10, 15, .78);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.mode-reference-remove:hover,
.mode-reference-remove:focus-visible {
  border-color: #85baff;
  background: #18365a;
  outline: 0;
}

.mode-reference-remove:disabled {
  opacity: .45;
  cursor: default;
}

.mode-reference-move {
  position: absolute;
  bottom: 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 10, 15, .78);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.mode-reference-move-up {
  left: 5px;
}

.mode-reference-move-down {
  right: 5px;
}

.mode-reference-move:hover,
.mode-reference-move:focus-visible {
  border-color: #85baff;
  background: #18365a;
  outline: 0;
}

.mode-reference-move:disabled {
  opacity: .3;
  cursor: default;
}

.mode-text-field > span {
  margin-bottom: 8px;
  display: block;
  color: #9ca3ad;
  font-size: 10px;
  font-weight: 700;
}

.mode-text-field textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid #303640;
  border-radius: 6px;
  outline: 0;
  color: #eef0f3;
  background: #101319;
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
}

.mode-text-field textarea:focus {
  border-color: #6085ae;
  box-shadow: 0 0 0 2px rgba(96, 133, 174, .13);
}

.mode-text-field textarea::placeholder {
  color: #636b75;
}

.mode-engine-selector {
  height: 58px;
}

.mode-engine-selector.two-options {
  grid-template-columns: repeat(2, 1fr);
}

.mode-engine-selector span {
  height: 50px;
  padding: 6px 5px;
  align-content: center;
  gap: 3px;
  font-size: 9px;
}

.mode-engine-selector span small {
  display: block;
  color: #7e8792;
  font-size: 7px;
  font-weight: 650;
}

.mode-engine-selector input:checked + span small {
  color: #b9cbe0;
}

.mode-settings-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mode-select-field {
  display: grid;
  gap: 8px;
}

.mode-select-field > span {
  color: #b8bec8;
  font-size: 11px;
  font-weight: 750;
}

.mode-select-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: #f1f3f5;
  border: 1px solid #353b45;
  border-radius: 7px;
  background: #15181e;
  font: inherit;
  font-size: 13px;
}

.mode-select-field select:disabled {
  color: #78818d;
  cursor: wait;
  opacity: .78;
}

.mode-voice-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.mode-voice-preview {
  min-width: 156px;
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #3a4c62;
  border-radius: 8px;
  color: #e7f2ff;
  background: linear-gradient(135deg, #16253a, #101a29);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mode-voice-preview .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: currentColor;
}

.mode-voice-preview:hover:not(:disabled),
.mode-voice-preview:focus-visible,
.mode-voice-preview.is-playing {
  border-color: #72a8e4;
  color: #fff;
  background: linear-gradient(135deg, #1c3c66, #142b49);
  box-shadow: 0 0 0 2px rgba(81, 145, 218, .12), 0 0 24px rgba(45, 126, 219, .13);
  outline: 0;
}

.mode-voice-preview:disabled {
  border-color: #303640;
  color: #6f7883;
  background: #13171c;
  box-shadow: none;
  cursor: not-allowed;
}

.mode-voice-meta {
  min-height: 18px;
  margin: 7px 0 0;
  color: #8793a1;
  font-size: 10px;
  line-height: 1.55;
}

.mode-voice-meta strong {
  color: #b8d7fb;
  font-weight: 800;
}

.mode-storyboard-note { margin: 0; color: #9ca5b1; font-size: 10px; line-height: 1.48; }
.storyboard-workbench { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; gap: 24px; padding: clamp(20px, 4vw, 54px); background: radial-gradient(circle at 50% 12%, rgba(116, 155, 255, .15), transparent 34%), #0b0e13; }
.storyboard-workbench-heading { display: grid; gap: 5px; text-align: center; }.storyboard-workbench-heading span { color: #7f9fce; font-size: 9px; font-weight: 800; letter-spacing: .15em; }.storyboard-workbench-heading strong { color: #ecf1f7; font-size: 17px; }
.storyboard-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }.storyboard-frame-grid > * { min-width: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border: 1px solid #37404d; border-radius: 7px; color: #8491a1; background: linear-gradient(135deg, #151b24, #0c0f14); font: 800 11px/1 inherit; }.storyboard-frame-grid img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.storyboard-runway { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: #bcd7ff; font-size: 9px; font-weight: 800; letter-spacing: .11em; }.storyboard-runway span { height: 1px; background: linear-gradient(90deg, transparent, #6f9ce0); }.storyboard-runway span:last-child { transform: scaleX(-1); }.storyboard-runway b { padding: 8px 11px; border: 1px solid #46628b; border-radius: 999px; background: rgba(62, 95, 141, .2); }


.mode-settings-row .segmented,
.mode-form-section > .segmented:not(.mode-engine-selector) {
  grid-template-columns: repeat(2, 1fr);
}

.mode-settings-row.mode-video-settings-row {
  grid-template-columns: minmax(0, 1fr);
}

.mode-settings-row .mode-duration-selector {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-aspect-selector {
  grid-template-columns: repeat(4, 1fr) !important;
}

.mode-video-aspect {
  grid-template-columns: repeat(3, 1fr) !important;
}

.mode-resolution-label {
  margin-top: 18px;
}

.mode-toggle {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #b8bec6;
  cursor: pointer;
  font-size: 10px;
}

.mode-toggle input {
  position: absolute;
  opacity: 0;
}

.mode-toggle > span {
  position: relative;
  width: 34px;
  height: 19px;
  border: 1px solid #414852;
  border-radius: 999px;
  background: #181c22;
  transition: background 150ms ease, border-color 150ms ease;
}

.mode-toggle > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9aa1aa;
  transition: transform 150ms ease, background 150ms ease;
}

.mode-toggle input:checked + span {
  border-color: #557ca7;
  background: #0d2a4f;
}

.mode-toggle input:checked + span::after {
  background: #fff;
  transform: translateX(15px);
}

.mode-toggle b {
  font-weight: 650;
}

.mode-consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  color: #9ba2ac;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.5;
}

.mode-consent > .custom-checkbox {
  flex: 0 0 auto;
  margin-top: 1px;
}

.mode-consent > input {
  position: absolute;
  top: 8px;
  left: 1px;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}

.mode-consent input:checked + .custom-checkbox {
  border-color: #557ca7;
  background: #0d2a4f;
}

.mode-consent input:checked + .custom-checkbox .icon {
  opacity: 1;
}

.mode-generate {
  width: 100%;
  margin-top: 8px;
}

.mode-generate > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.mode-generate .icon {
  width: 16px;
  height: 16px;
}

.mode-generate .spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 850ms linear infinite;
}

/* Ajustes compactos: la misma lógica de ventanas de elección de Vidreum Studio. */
.mode-form .generation-credit-summary {
  display: none;
}

.mode-form-section--compact-settings {
  position: relative;
}

.mode-settings-row[hidden],
.mode-voice-control[hidden],
.mode-select-field[hidden],
.setting-label[hidden] {
  display: none;
}

.mode-compact-settings {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 8px;
}

.mode-compact-settings[data-picker-count="4"] {
  grid-template-columns: minmax(0, 1.42fr) repeat(3, minmax(0, 1fr));
}

.mode-compact-settings[data-picker-count="3"] {
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
}

.mode-compact-settings[data-picker-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mode-compact-settings[data-picker-count="1"] {
  grid-template-columns: minmax(138px, 210px);
}

.mode-compact-settings.has-secondary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mode-compact-picker {
  position: relative;
  min-width: 0;
}

.mode-compact-picker-trigger {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid #303a47;
  border-radius: 7px;
  color: #c9d2dd;
  background: linear-gradient(180deg, rgba(22, 28, 36, .98), rgba(13, 17, 23, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 7px 18px rgba(0, 0, 0, .12);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.mode-compact-picker-trigger:hover,
.mode-compact-picker-trigger:focus-visible,
.mode-compact-picker.is-open .mode-compact-picker-trigger {
  border-color: rgba(93, 166, 255, .54);
  color: #fff;
  outline: 0;
  background: linear-gradient(180deg, rgba(27, 48, 74, .98), rgba(12, 27, 47, .98));
  box-shadow: inset 0 1px 0 rgba(196, 226, 255, .1), 0 0 0 2px rgba(47, 132, 225, .1), 0 0 20px rgba(35, 132, 239, .1);
}

.mode-compact-picker-trigger:disabled {
  opacity: .48;
  cursor: wait;
  box-shadow: none;
}

.mode-compact-picker-leading {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  color: #8cc7ff;
}

.mode-compact-picker-leading .icon {
  width: 15px;
  height: 15px;
}

.mode-compact-picker-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.mode-compact-picker-trigger .mode-compact-picker-logo {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 6px;
  background: #f7f8fa;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.mode-compact-picker-value {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-compact-picker-chevron {
  width: 10px;
  height: 10px;
  margin-left: auto;
  flex: 0 0 10px;
  color: #687789;
  transform: rotate(-90deg);
  transition: transform 150ms ease, color 150ms ease;
}

.mode-compact-picker.is-open .mode-compact-picker-chevron {
  color: #a8d5ff;
  transform: rotate(90deg);
}

.mode-compact-picker-aspect {
  width: 20px;
  height: 13px;
  display: block;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.mode-compact-picker-aspect[data-aspect="1:1"] { width: 14px; height: 14px; }
.mode-compact-picker-aspect[data-aspect="4:5"] { width: 12px; height: 15px; }
.mode-compact-picker-aspect[data-aspect="9:16"] { width: 9px; height: 16px; }
.mode-compact-picker-aspect[data-aspect="16:9"] { width: 20px; height: 11px; }

.mode-compact-picker-native {
  display: none;
}

.mode-compact-picker-menu {
  position: absolute;
  z-index: 82;
  bottom: calc(100% + 9px);
  left: 0;
  width: 210px;
  max-width: min(330px, calc(100vw - 32px));
  padding: 9px;
  border: 1px solid rgba(75, 105, 139, .55);
  border-radius: 12px;
  color: #dce4ed;
  background: rgba(10, 14, 20, .985);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .035), 0 0 28px rgba(33, 115, 204, .08);
  transform-origin: left bottom;
  backdrop-filter: blur(18px);
}

.mode-compact-picker-menu:not([hidden]) {
  animation: mode-compact-picker-in 160ms cubic-bezier(.2, .75, .2, 1) both;
}

.mode-compact-picker-menu[hidden] {
  display: none;
}

.mode-compact-picker.opens-down .mode-compact-picker-menu {
  top: calc(100% + 9px);
  bottom: auto;
  transform-origin: left top;
}

.mode-compact-picker--model .mode-compact-picker-menu {
  width: 306px;
}

.mode-compact-picker--language .mode-compact-picker-menu {
  width: 250px;
}

.mode-compact-picker--voice .mode-compact-picker-menu {
  width: 330px;
}

.mode-compact-settings > .mode-compact-picker:last-of-type .mode-compact-picker-menu {
  right: 0;
  left: auto;
  transform-origin: right bottom;
}

.mode-compact-settings > .mode-compact-picker:last-of-type.opens-down .mode-compact-picker-menu {
  transform-origin: right top;
}

@keyframes mode-compact-picker-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mode-compact-picker-search {
  height: 36px;
  margin-bottom: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #202936;
  border-radius: 8px;
  background: #080c12;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mode-compact-picker-search[hidden] {
  display: none;
}

.mode-compact-picker-search:focus-within {
  border-color: rgba(87, 164, 247, .48);
  box-shadow: 0 0 0 3px rgba(41, 125, 224, .1);
}

.mode-compact-picker-search .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: #718093;
}

.mode-compact-picker-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #e9eef5;
  background: transparent;
  font: inherit;
  font-size: 10px;
}

.mode-compact-picker-search input::placeholder {
  color: #667180;
}

.mode-compact-picker-title {
  margin: 4px 6px 7px;
  color: #748196;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mode-compact-picker-options {
  max-height: min(260px, calc(100dvh - 220px));
  display: grid;
  gap: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #34465c transparent;
  scrollbar-width: thin;
}

.mode-compact-picker-option {
  width: 100%;
  min-height: 40px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #aeb9c6;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.mode-compact-picker--model .mode-compact-picker-option {
  min-height: 50px;
}

.mode-compact-picker-option[hidden] {
  display: none;
}

.mode-compact-picker-option:hover,
.mode-compact-picker-option:focus-visible {
  border-color: rgba(105, 169, 239, .16);
  color: #fff;
  outline: 0;
  background: rgba(49, 104, 166, .15);
}

.mode-compact-picker-option:active {
  transform: scale(.99);
}

.mode-compact-picker-option[aria-selected="true"] {
  border-color: rgba(72, 151, 239, .29);
  color: #fff;
  background: linear-gradient(105deg, rgba(31, 100, 183, .25), rgba(28, 50, 76, .2));
}

.mode-compact-picker-option:disabled {
  opacity: .42;
  cursor: wait;
}

.mode-compact-picker-option-leading {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 166, 208, .18);
  border-radius: 7px;
  color: #8fc9ff;
  background: linear-gradient(145deg, rgba(31, 49, 70, .88), rgba(14, 20, 29, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.mode-compact-picker-option-leading .icon {
  width: 14px;
  height: 14px;
}

.mode-compact-picker--model .mode-compact-picker-option-leading {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  color: #d8ecff;
  padding: 6px;
  border-color: rgba(255, 255, 255, .2);
  background: #f7f8fa;
}

.mode-compact-picker--model .mode-compact-picker-option-leading .mode-compact-picker-logo {
  width: 100%;
  height: 100%;
}

.mode-compact-picker-option-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.mode-compact-picker-option-copy strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-compact-picker-option-copy small {
  overflow: hidden;
  color: #758296;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-compact-picker-option-credit {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(93, 164, 230, .24);
  border-radius: 999px;
  color: #8ccaff;
  background: rgba(13, 39, 68, .65);
  font-size: 7px;
  font-weight: 850;
}

.mode-compact-picker-option-check {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: grid;
  place-items: center;
  border: 1px solid #293443;
  border-radius: 50%;
  color: transparent;
  background: rgba(3, 7, 12, .45);
  font-size: 9px;
  font-weight: 900;
}

.mode-compact-picker-option[aria-selected="true"] .mode-compact-picker-option-check {
  border-color: #4ca7ff;
  color: #fff;
  background: #2387e7;
  box-shadow: 0 0 13px rgba(35, 135, 231, .35);
}

.mode-compact-picker-empty {
  margin: 8px 4px 4px;
  color: #738092;
  font-size: 9px;
  text-align: center;
}

.mode-compact-settings-secondary {
  min-width: 142px;
  min-height: 44px;
}

.mode-upload-zone .upload-icon {
  width: 36px;
  height: 36px;
}

.mode-region-upload-hint {
  margin: 10px 0 0;
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid rgba(48, 143, 255, .24);
  border-radius: 7px;
  color: #8796a8;
  background: rgba(21, 76, 139, .09);
  font-size: 9px;
  line-height: 1.45;
}

.mode-region-upload-hint .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #4ca7ff;
}

.mode-region-upload-hint strong {
  margin-bottom: 2px;
  display: block;
  color: #cbd9e8;
  font-size: 9px;
}

.mode-preview {
  min-width: 0;
  min-height: calc(100vh - 114px);
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) auto;
  background: #0e1115;
}

.mode-preview-toolbar,
.mode-preview-footer {
  padding: 0 clamp(18px, 2.5vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mode-preview-toolbar {
  border-bottom: 1px solid #262a31;
}

.mode-preview-toolbar > div > span,
.mode-preview-footer > div:first-child > span {
  margin-bottom: 4px;
  display: block;
  color: #727b86;
  font-size: 8px;
  font-weight: 800;
}

.mode-preview-toolbar strong,
.mode-preview-footer strong {
  color: #e7e9ec;
  font-size: 11px;
}

.mode-preview-badge {
  padding: 6px 8px;
  border: 1px solid #343b45;
  border-radius: 4px;
  color: #8e98a4;
  background: #15191f;
  font-size: 7px;
  font-weight: 850;
}

.mode-preview-badge.ready {
  border-color: rgba(90, 172, 139, .42);
  color: #86d6b6;
  background: rgba(27, 89, 66, .22);
}

.mode-preview-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: clamp(14px, 2vw, 26px);
  overflow: hidden;
  border: 1px solid #2c3139;
  border-radius: 8px;
  background-color: #080a0d;
  background-image: linear-gradient(45deg, #0d1014 25%, transparent 25%), linear-gradient(-45deg, #0d1014 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0d1014 75%), linear-gradient(-45deg, transparent 75%, #0d1014 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .3);
}

.mode-preview-placeholder {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  color: #717985;
  text-align: center;
}

.mode-preview-placeholder .icon {
  width: 32px;
  height: 32px;
  margin-bottom: 13px;
}

.mode-preview-placeholder strong {
  color: #b3b9c1;
  font-size: 12px;
}

.mode-preview-placeholder span {
  margin-top: 6px;
  font-size: 9px;
}

.mode-source-image,
.mode-result-image,
.mode-result-video,
.mode-result-comparison {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  inset: 0;
  object-fit: contain;
  background: #050609;
}

.mode-image-region-editor {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mode-image-region-editor[hidden] {
  display: none;
}

.mode-image-region-editor canvas {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 1px;
  cursor: crosshair;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.mode-image-region-editor canvas:focus-visible {
  outline: 2px solid #7bc4ff;
  outline-offset: -2px;
}

.mode-image-region-editor.is-locked canvas {
  cursor: wait;
  pointer-events: none;
}

.mode-image-region-hint {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(75, 164, 255, .32);
  border-radius: 7px;
  color: #a9b9ca;
  background: rgba(8, 14, 22, .82);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  font-size: 9px;
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.mode-image-region-hint strong {
  color: #eef7ff;
  font-size: 9px;
  white-space: nowrap;
}

.mode-image-region-editor.has-selection .mode-image-region-hint {
  opacity: .7;
  transform: translateX(-50%) translateY(-3px);
}

.mode-image-region-toolbar {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 50%;
  max-width: calc(100% - 24px);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(99, 116, 137, .48);
  border-radius: 9px;
  background: rgba(9, 13, 19, .9);
  box-shadow: 0 13px 36px rgba(0, 0, 0, .48);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  transform: translateX(-50%);
}

.mode-image-region-toolbar button {
  min-height: 34px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #9da9b8;
  background: transparent;
  font: 750 9px/1 Inter, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.mode-image-region-toolbar button:hover:not(:disabled) {
  color: #f4f8fc;
  background: rgba(255, 255, 255, .07);
}

.mode-image-region-toolbar button.is-active {
  border-color: rgba(82, 174, 255, .55);
  color: #fff;
  background: linear-gradient(135deg, rgba(18, 117, 230, .92), rgba(36, 142, 255, .72));
  box-shadow: 0 0 18px rgba(31, 137, 255, .22);
}

.mode-image-region-toolbar button:focus-visible,
.mode-image-region-size input:focus-visible {
  outline: 2px solid #a4d8ff;
  outline-offset: 2px;
}

.mode-image-region-toolbar button:disabled {
  opacity: .32;
  cursor: default;
}

.mode-image-region-toolbar .icon {
  width: 14px;
  height: 14px;
}

.mode-image-region-size {
  min-width: 112px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr);
  align-items: center;
  gap: 7px;
  color: #8793a3;
  font-size: 8px;
  font-weight: 750;
}

.mode-image-region-size input {
  width: 68px;
  accent-color: #2999ff;
  cursor: ew-resize;
}

.mode-image-region-editor.is-locked .mode-image-region-toolbar {
  opacity: .55;
}

.mode-result-image,
.mode-result-video {
  cursor: zoom-in;
}

.mode-result-image:focus-visible,
.mode-result-video:focus-visible {
  outline: 2px solid #5c9dff;
  outline-offset: -2px;
}

.mode-edit-image-action {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(18px, 3vw, 34px);
  min-width: min(310px, calc(100% - 36px));
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  overflow: hidden;
  border: 1px solid rgba(133, 203, 255, .68);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(110deg, rgba(30, 91, 255, .96), rgba(77, 67, 226, .97) 52%, rgba(27, 171, 238, .96));
  box-shadow:
    0 15px 38px rgba(15, 72, 218, .38),
    0 0 22px rgba(65, 174, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  font: 800 12px/1 Inter, Arial, sans-serif;
  letter-spacing: .035em;
  transform: translateX(-50%);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.mode-edit-image-action[hidden] {
  display: none;
}

.mode-edit-image-action::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .24) 48%, transparent 72%);
  translate: -120% 0;
  transition: translate 500ms ease;
}

.mode-edit-image-action:hover {
  filter: saturate(1.16) brightness(1.08);
  box-shadow:
    0 18px 44px rgba(15, 72, 218, .48),
    0 0 30px rgba(65, 174, 255, .34),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: translateX(-50%) translateY(-2px);
}

.mode-edit-image-action:hover::before {
  translate: 120% 0;
}

.mode-edit-image-action:focus-visible {
  outline: 2px solid #bfe9ff;
  outline-offset: 3px;
}

.mode-edit-image-action:disabled {
  cursor: wait;
  filter: saturate(.72);
  transform: translateX(-50%);
}

.mode-edit-image-action .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.mode-edit-image-action .mode-edit-image-arrow {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}

.mode-result-comparison {
  overflow: hidden;
}

.mode-result-comparison > img,
.mode-result-comparison > span,
.mode-result-comparison > span img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mode-result-comparison > img {
  filter: grayscale(.8) sepia(.2) contrast(.82);
}

.mode-result-comparison > span {
  clip-path: inset(0 0 0 var(--result-compare));
}

.mode-result-comparison > i {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--result-compare);
  width: 1px;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, .5);
  pointer-events: none;
}

.mode-result-comparison > i > b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  color: #101318;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  transform: translate(-50%, -50%);
}

.mode-result-comparison > i .icon {
  width: 17px;
  height: 17px;
  transform: rotate(180deg);
}

.mode-result-comparison > input {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.mode-processing {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  color: #e9ebee;
  background: rgba(5, 7, 10, .88);
  backdrop-filter: blur(10px);
  text-align: center;
}

.mode-processing > .spinner {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 2px solid #303a46;
  border-top-color: #83aeda;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

.mode-processing strong {
  font-size: 14px;
}

.mode-processing p {
  margin: 7px 0 16px;
  color: #8e98a4;
  font-size: 10px;
}

.mode-processing > div {
  width: min(100%, 330px);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #252b33;
}

.mode-processing > div > span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #4c80b8, #9bbfe4);
  transition: width 500ms ease;
}

.mode-processing output {
  margin-top: 9px;
  color: #aab2bc;
  font-size: 9px;
}

.mode-preview-footer {
  border-top: 1px solid #262a31;
  min-height: 58px;
}

.mode-result-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mode-result-actions button {
  min-height: 36px;
}

@media (min-width: 821px) {
  .mode-studio {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .mode-preview {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .mode-studio-workspace {
    position: absolute;
    top: 114px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .mode-controls {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-color: #2c3d52 transparent;
    scrollbar-width: thin;
  }

  .mode-controls-inner {
    min-height: 100%;
  }

  .mode-preview {
    height: 100%;
    min-height: 0;
  }

  .mode-reference-list {
    grid-template-columns: repeat(5, 44px);
    gap: 6px;
  }

  .mode-reference-item {
    width: 44px;
  }

  .mode-reference-item figcaption {
    display: none;
  }

  .mode-reference-order {
    top: 3px;
    left: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 6px;
  }

  .mode-reference-remove {
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    font-size: 14px;
  }

  .mode-reference-move {
    bottom: 3px;
    width: 16px;
    height: 16px;
    font-size: 7px;
  }

  .mode-reference-move-up { left: 3px; }
  .mode-reference-move-down { right: 3px; }

  .mode-form:has(.mode-reference-list:not([hidden])) .mode-text-field textarea {
    height: 48px;
    min-height: 48px;
  }

  .mode-form-section:has(.mode-reference-list:not([hidden])) {
    padding-bottom: 4px;
  }

  .mode-form-section:has(.mode-reference-list:not([hidden])) .mode-reference-meta {
    margin-top: 2px;
    justify-content: flex-end;
  }

  .mode-form-section:has(.mode-reference-list:not([hidden])) .mode-reference-meta p {
    display: none;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  .mode-controls-inner {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .mode-editor-heading {
    padding-bottom: 11px;
  }

  .mode-editor-heading h1 {
    font-size: 29px;
  }

  .mode-editor-heading > span {
    margin-top: 6px;
    font-size: 10px;
  }

  .mode-form-section {
    padding: 10px 0;
  }

  .mode-form-section legend {
    margin-bottom: 7px;
  }

  .mode-upload-zone {
    min-height: 56px;
  }

  .mode-text-field textarea {
    min-height: 62px;
  }

  .mode-compact-picker-trigger,
  .mode-compact-settings-secondary {
    height: 40px;
    min-height: 40px;
  }

  .mode-consent {
    min-height: 30px;
  }

  .mode-generate {
    height: 46px;
    margin-top: 7px;
  }

  .mode-preview {
    grid-template-rows: 48px minmax(0, 1fr) 52px;
  }

  .mode-preview-stage {
    margin: 12px;
  }
}

@media (max-width: 1100px) {
  .mode-studio-workspace {
    grid-template-columns: minmax(380px, 44%) minmax(0, 1fr);
  }

  .mode-controls-inner {
    padding: 18px;
  }

  .mode-settings-row {
    grid-template-columns: 1fr;
  }

  .mode-compact-settings {
    gap: 6px;
  }

  .mode-compact-picker-trigger {
    padding-right: 5px;
    padding-left: 5px;
    gap: 4px;
  }

  .mode-compact-picker-leading {
    width: 16px;
    height: 20px;
    flex-basis: 16px;
  }

  .mode-compact-picker-leading .icon {
    width: 13px;
    height: 13px;
  }

  .mode-compact-picker-chevron {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }

  .mode-compact-picker-value {
    font-size: 9px;
  }
}

@media (max-width: 820px) {
  .creative-modes {
    overflow: hidden;
  }

  .creative-mode-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(280px, 70vw, 380px);
    margin-right: -20px;
    padding-right: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
  }

  /* Igual que .creative-mode-rail: por debajo de este ancho "Mis proyectos"
     también debe poder deslizarse con el dedo, no solo por debajo de 620px. */
  .projects-media-group {
    overflow: hidden;
  }

  .projects-grid.is-mobile-carousel {
    width: calc(100% + 20px);
    margin-right: -20px;
    padding: 2px 20px 14px 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 300px);
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 0 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .projects-grid.is-mobile-carousel::-webkit-scrollbar { display: none; }
  .projects-grid.is-mobile-carousel > .project-card-shell { scroll-snap-align: start; }

  .mode-studio-workspace {
    display: block;
  }

  .mode-controls {
    border-right: 0;
    border-bottom: 1px solid #252930;
  }

  .mode-controls-inner {
    max-width: 680px;
    margin: 0 auto;
  }

  .mode-preview {
    min-height: 720px;
    grid-template-rows: 65px minmax(520px, 1fr) 72px;
  }
}

@media (max-width: 620px) {
  /* En móvil el estudio sigue ocupando la pantalla, pero su contenido debe
     desplazarse dentro de la vista fija del editor. */
  #modeEditorView:not([hidden]) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .creative-mode-rail {
    grid-auto-columns: min(82vw, 330px);
    gap: 10px;
    margin-right: -16px;
    padding-right: 16px;
  }

  .creative-mode-copy button strong {
    font-size: 19px;
  }

  .mode-studio-topbar {
    height: 60px;
    padding: 0 14px;
  }

  .mode-switcher {
    display: none;
  }

  .mode-switcher-set button {
    padding: 2px 1px;
    letter-spacing: 0;
  }

  .mode-switcher-set {
    padding: 4px 3px;
    gap: 3px;
  }

  .mode-studio-workspace {
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
  }

  /* Mantener la marca visible junto al logo en todos los estudios creativos. */
  #appView .brand-name,
  .mode-studio-topbar .brand-name {
    display: inline;
  }

  .mode-engine-status {
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .mode-controls-inner {
    padding: 20px 16px 26px;
  }

  .mode-editor-heading h1 {
    font-size: 34px;
  }

  .mode-upload-zone {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .mode-upload-zone > b {
    display: none;
  }

  .mode-reference-meta {
    display: grid;
    gap: 5px;
  }

  .mode-reference-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mode-voice-control {
    grid-template-columns: 1fr;
  }

  .mode-voice-preview {
    width: 100%;
  }

  .mode-engine-selector {
    height: auto;
    grid-template-columns: 1fr !important;
  }

  .mode-engine-selector span {
    min-height: 48px;
  }

  .mode-compact-settings[data-picker-count="3"],
  .mode-compact-settings[data-picker-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-compact-settings.has-secondary {
    grid-template-columns: 1fr;
  }

  .mode-compact-settings-secondary {
    width: 100%;
  }

  .mode-aspect-selector {
    height: auto;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mode-preview {
    min-height: 600px;
    grid-template-rows: 60px minmax(420px, 1fr) auto;
  }

  .mode-preview-stage {
    margin: 16px;
  }

  .mode-image-region-hint {
    top: 8px;
    padding: 7px 9px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .mode-image-region-hint strong {
    white-space: normal;
  }

  .mode-image-region-toolbar {
    bottom: 8px;
    width: calc(100% - 16px);
    max-width: 420px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mode-image-region-toolbar button {
    min-width: 0;
    padding: 0 4px;
    gap: 4px;
  }

  .mode-image-region-size {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mode-image-region-size input {
    width: 100%;
  }

  .mode-preview-toolbar,
  .mode-preview-footer {
    padding: 0 16px;
  }

  .mode-preview-footer { min-height: 58px; }

  .mode-result-actions button {
    width: 36px;
    padding: 0;
    font-size: 0;
  }

  .mode-result-actions .icon {
    width: 15px;
    height: 15px;
  }

  .mode-edit-image-action {
    min-width: min(280px, calc(100% - 28px));
    min-height: 48px;
    bottom: 14px;
  }
}

/* Escala reforzada para marca y navegación principal */
.brand-mark {
  width: 48px;
  height: 48px;
}

.brand-name {
  font-size: 20px;
}

.auth-brand,
.auth-mobile-brand {
  font-size: 22px;
}

.auth-brand-mark {
  width: 58px;
  height: 58px;
}

.sidebar-brand-row {
  height: 60px;
}

.sidebar-brand {
  gap: 11px;
  font-size: 22px;
}

.sidebar-brand .brand-mark {
  width: 54px;
  height: 54px;
}

.sidebar-avatar {
  font-size: 13px;
}

.sidebar-account strong {
  font-size: 14px;
}

.sidebar-account div span {
  font-size: 11px;
}

.sidebar-plan {
  font-size: 10px;
}

.sidebar-section-label {
  font-size: 11px;
}

.sidebar-link {
  height: 48px;
  font-size: 14px;
}

.sidebar-link small {
  font-size: 10px;
}

.sidebar-auth-actions button {
  height: 44px;
  font-size: 13px;
}

.sidebar-credits > div:first-child {
  font-size: 11px;
}

.sidebar-credits > strong {
  font-size: 22px;
}

.dashboard-topbar {
  height: 78px;
}

.dashboard-breadcrumb span {
  font-size: 11px;
}

.dashboard-breadcrumb strong {
  font-size: 16px;
}

.dashboard-top-actions {
  gap: 12px;
}

.dashboard-login-button,
.dashboard-register-button,
.dashboard-credit-pill,
.dashboard-plans-button,
.dashboard-new-button {
  height: 42px;
  font-size: 12px;
}

.dashboard-credit-pill strong {
  font-size: 13px;
}

.dashboard-profile-wrap .profile-button {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

@media (max-width: 620px) {
  .auth-brand,
  .auth-mobile-brand {
    font-size: 19px;
  }

  .auth-brand-mark {
    width: 46px;
    height: 46px;
  }

  .dashboard-topbar {
    height: 64px;
  }

  .dashboard-breadcrumb strong {
    font-size: 15px;
  }

  .dashboard-top-actions {
    gap: 6px;
  }

  .dashboard-login-button,
  .dashboard-credit-pill,
  .dashboard-plans-button {
    height: 36px;
    font-size: 11px;
  }

  .dashboard-profile-wrap .profile-button {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }
}

/* Automatización social de proyectos de clipping. */
.clipping-project-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.clipping-project-top-actions > span { margin-right: 5px; color: #91a0b1; font-size: 12px; white-space: nowrap; }
.clipping-automate-button, .clipping-social-settings { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; color: #dceeff; border: 1px solid #3b526c; border-radius: 8px; background: #111722; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.clipping-automate-button { color: #06111d; border-color: #7ed0ff; background: linear-gradient(135deg, #79dcff, #4f8cff); box-shadow: 0 0 20px rgba(50,159,255,.23); }
.clipping-automate-button:hover, .clipping-automate-button.is-selecting { border-color: #fff; box-shadow: 0 0 0 1px rgba(132,215,255,.45), 0 0 28px rgba(35,159,255,.44); transform: translateY(-1px); }
.clipping-social-settings:hover { color: #fff; border-color: #72c7ff; background: #172334; }
.clipping-automate-button:disabled, .clipping-social-settings:disabled { cursor: default; opacity: .68; filter: saturate(.55); box-shadow: none; transform: none; }
.clipping-automate-button:disabled:hover, .clipping-social-settings:disabled:hover { border-color: #3b526c; box-shadow: none; transform: none; }
.clipping-automate-button .icon, .clipping-social-settings .icon { width: 14px; height: 14px; }
.clipping-project-view.is-selecting-clips .clipping-clip-preview-trigger { cursor: pointer; }
.clipping-project-view.is-selecting-clips .clipping-clip-media::before { content: "Seleccionar"; position: absolute; z-index: 4; inset: 9px auto auto 9px; padding: 5px 8px; color: #dff5ff; border: 1px solid rgba(117,207,255,.7); border-radius: 5px; background: rgba(5,22,38,.88); font-size: 9px; font-weight: 850; letter-spacing: .05em; }
.clipping-project-view.is-selecting-clips .clipping-clip-index { display: none; }
.clipping-clip-card.is-automation-selected .clipping-clip-media { border-color: #75d8ff; box-shadow: 0 0 0 2px #369eff, 0 0 13px rgba(48,181,255,.9), 0 0 34px rgba(35,126,255,.62); transform: translateY(-3px); }
.clipping-clip-card.is-automation-selected .clipping-clip-media::before { content: "✓ Seleccionado"; color: #06121f; border-color: #fff; background: #82ddff; }
html[lang="en"] .clipping-project-view.is-selecting-clips .clipping-clip-media::before { content: "Select"; }
html[lang="en"] .clipping-clip-card.is-automation-selected .clipping-clip-media::before { content: "✓ Selected"; }
.clipping-clip-publications { margin-top: 10px; display: grid; gap: 6px; }
.clipping-clip-publications[hidden] { display: none; }
.clipping-clip-publications > div { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px 8px; color: #abc4da; border: 1px solid #293748; border-radius: 6px; background: rgba(21,35,51,.7); font-size: 9px; font-weight: 700; }
.clipping-clip-publications > div[data-status="published"] { color: #aef5c8; border-color: rgba(65,203,117,.35); background: rgba(38,130,74,.12); }
.clipping-clip-publications > div[data-status="error"] { color: #ffb9c1; border-color: rgba(255,91,111,.35); background: rgba(130,30,48,.14); }
.clipping-clip-publications .social-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.clipping-clip-publications span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-schedule-modal[hidden] { display: none; }
.social-schedule-modal { position: fixed; z-index: 250; inset: 0; display: grid; place-items: center; padding: 24px; }
.social-schedule-backdrop { position: absolute; inset: 0; background: rgba(2,5,10,.82); backdrop-filter: blur(10px); }
.social-schedule-dialog { position: relative; width: min(950px,100%); max-height: calc(100dvh - 48px); overflow: auto; color: #edf7ff; border: 1px solid #314a67; border-radius: 16px; background: linear-gradient(145deg,#111923,#090d13 65%); box-shadow: 0 32px 100px rgba(0,0,0,.68), 0 0 50px rgba(42,145,255,.12); }
.social-schedule-dialog > header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 25px; border-bottom: 1px solid #26384c; background: rgba(12,18,26,.96); backdrop-filter: blur(12px); }
.social-schedule-dialog > header span { color: #62c8ff; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.social-schedule-dialog > header h2 { margin: 4px 0 0; font-size: 21px; }
.social-schedule-dialog > header > button { width: 36px; height: 36px; display: grid; place-items: center; color: #b8c9d9; border: 1px solid #344454; border-radius: 8px; background: #121a23; cursor: pointer; }
.social-schedule-dialog > header .icon { width: 16px; height: 16px; }
.social-schedule-dialog form { padding: 24px; }
.social-schedule-clips { display: grid; gap: 14px; }
.social-schedule-clip { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; padding: 14px; border: 1px solid #293c51; border-radius: 11px; background: rgba(18,29,41,.75); }
.social-schedule-clip video { width: 100%; max-height: 210px; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 7px; background: #000; }
.social-schedule-clip > div { display: grid; align-content: center; gap: 12px; }
.social-schedule-clip label > span, .social-schedule-timing label > span { margin-bottom: 6px; display: block; color: #9fb3c6; font-size: 10px; font-weight: 750; }
.social-schedule-clip input, .social-schedule-clip textarea, .social-schedule-timing input, .social-schedule-timing select { width: 100%; box-sizing: border-box; color: #f2f8ff; border: 1px solid #35495d; border-radius: 7px; outline: none; background: #0c131b; font: inherit; font-size: 12px; }
.social-schedule-clip input, .social-schedule-timing input, .social-schedule-timing select { height: 40px; padding: 0 11px; }
.social-schedule-clip textarea { padding: 10px 11px; resize: vertical; line-height: 1.45; }
.social-schedule-clip input:focus, .social-schedule-clip textarea:focus, .social-schedule-timing input:focus, .social-schedule-timing select:focus { border-color: #6bc9ff; box-shadow: 0 0 0 3px rgba(67,172,255,.13); }
.social-schedule-networks { margin: 21px 0 0; padding: 16px; border: 1px solid #2b3d50; border-radius: 10px; }
.social-schedule-networks legend { padding: 0 6px; color: #b8cce0; font-size: 11px; font-weight: 800; }
.social-schedule-networks > div { display: flex; flex-wrap: wrap; gap: 9px; }
.social-schedule-networks label input { position: absolute; opacity: 0; pointer-events: none; }
.social-schedule-networks label span { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #98aabd; border: 1px solid #354657; border-radius: 8px; background: #101820; font-size: 11px; font-weight: 750; cursor: pointer; }
.social-schedule-networks label input:checked + span { color: #eefaff; border-color: #5cc6ff; background: rgba(34,123,183,.22); box-shadow: 0 0 16px rgba(39,161,244,.16); }
.social-schedule-networks .social-icon { width: 16px; height: 16px; }
.social-schedule-networks > button { margin-top: 12px; padding: 0; color: #78cfff; border: 0; background: transparent; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.social-schedule-tiktok-options[hidden] { display: none; }
.social-schedule-tiktok-options { margin-top: 15px; padding-top: 15px; display: grid; gap: 11px; border-top: 1px solid #2d4053; }
.social-schedule-tiktok-options > p { margin: 0; color: #e3eef9; font-size: 11px; font-weight: 800; }
.social-schedule-tiktok-options > label > span { margin-bottom: 6px; display: block; color: #9fb3c6; font-size: 10px; font-weight: 750; }
.social-schedule-tiktok-options select { width: 100%; height: 39px; padding: 0 10px; color: #eef7ff; border: 1px solid #35495d; border-radius: 7px; background: #0c131b; font: inherit; font-size: 11px; }
.social-schedule-tiktok-interactions { display: flex; flex-wrap: wrap; gap: 12px; }
.social-schedule-tiktok-interactions label, .social-schedule-tiktok-consent { display: flex; align-items: center; gap: 7px; color: #aebfd0; font-size: 10px; }
.social-schedule-tiktok-interactions input, .social-schedule-tiktok-consent input { accent-color: #56c9ff; }
.social-schedule-tiktok-interactions label:has(input:disabled) { opacity: .45; }
.social-schedule-tiktok-consent { padding: 10px; border: 1px solid #33485c; border-radius: 7px; background: rgba(24,43,60,.45); }
.social-schedule-timing { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.social-schedule-status { min-height: 18px; margin: 14px 0 0; color: #ffabb6; font-size: 11px; }
.social-schedule-dialog form > footer { margin: 4px -24px -24px; padding: 18px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #263747; background: rgba(9,14,20,.8); }
.social-schedule-dialog form > footer button { min-height: 40px; padding: 0 15px; color: #b7c7d6; border: 1px solid #354555; border-radius: 8px; background: #111923; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.social-schedule-dialog form > footer .social-schedule-submit { display: inline-flex; align-items: center; gap: 7px; color: #06111d; border-color: #79d1ff; background: linear-gradient(135deg,#79dcff,#4f8cff); }
.social-schedule-submit .icon { width: 14px; height: 14px; }
.social-schedule-submit:disabled { opacity: .55; cursor: wait; }
body.social-schedule-open { overflow: hidden; }
.social-connections-card { overflow: hidden; }
.social-connections-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.social-connections-heading p { margin: 7px 0 0; color: #7f8d9b; font-size: 12px; }
.social-refresh-button { width: 34px; height: 34px; display: grid; place-items: center; color: #9fb3c7; border: 1px solid #344251; border-radius: 8px; background: #10161d; cursor: pointer; }
.social-refresh-button .icon { width: 15px; height: 15px; }
.social-connections-list { margin-top: 19px; display: grid; gap: 9px; }
.social-connections-loading { color: #8998a7; font-size: 12px; }
.social-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; border: 1px solid #2c3743; border-radius: 9px; background: rgba(12,17,23,.58); }
.social-connection-row[data-connected="true"] { border-color: rgba(74,182,255,.36); background: rgba(29,94,139,.09); }
.social-connection-row > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.social-connection-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: #202b37; }
.social-connection-mark.is-instagram { background: linear-gradient(140deg,#6936cc,#e34779,#f6a43b); }
.social-connection-mark.is-facebook { background: #1877f2; }
.social-connection-mark.is-tiktok { background: #090a0d; box-shadow: inset 0 0 0 1px #303640; }
.social-connection-mark .social-icon { width: 19px; height: 19px; }
.social-connection-row > div > div { min-width: 0; display: grid; gap: 3px; }
.social-connection-row strong { color: #e9f1f8; font-size: 12px; }
.social-connection-row > div span { overflow: hidden; color: #8292a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-connection-row > button { min-height: 34px; padding: 0 12px; color: #d8efff; border: 1px solid #4288bb; border-radius: 7px; background: rgba(31,107,161,.25); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.social-connection-row > button.is-disconnect { color: #b2bdc8; border-color: #3d4752; background: #151b22; }
.social-connection-row > button:disabled { opacity: .5; }
@media (max-width: 850px) {
  .clipping-project-topbar { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .clipping-project-top-actions { width: 100%; margin-left: 0; }
  .clipping-project-top-actions > span { margin-right: auto; }
  .social-schedule-clip { grid-template-columns: 110px minmax(0,1fr); }
}
@media (max-width: 600px) {
  .clipping-project-top-actions > span, .clipping-social-settings span { display: none; }
  .clipping-automate-button { flex: 1; }
  .social-schedule-modal { padding: 0; }
  .social-schedule-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .social-schedule-dialog form { padding: 16px; }
  .social-schedule-clip { grid-template-columns: 82px minmax(0,1fr); gap: 11px; padding: 10px; }
  .social-schedule-timing { grid-template-columns: 1fr; }
  .social-schedule-dialog form > footer { margin: 4px -16px -16px; padding: 15px 16px; }
}

/* Reemplazo de personaje: estudio completo dentro del viewport de escritorio. */
@media (min-width: 1001px) {
  #appView { height: 100dvh; min-height: 0; display: grid; grid-template-rows: 66px 48px minmax(0, 1fr); overflow: hidden; }
  #appView[hidden] { display: none; }
  #appView .dance-studio-topbar, #appView .mode-switcher { position: relative; top: auto; }
  #appView .workspace { height: 100%; min-height: 0; overflow: hidden; grid-template-columns: minmax(540px, .92fr) minmax(420px, 1.08fr); }
  #appView .creator, #appView .preview-panel { height: 100%; min-height: 0; }
  #appView .creator { overflow: visible; position: relative; z-index: 2; }
  #appView .creator-inner { width: 100%; max-width: 700px; height: 100%; padding: 14px 24px 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  #appView .title-row { min-height: 0; padding-bottom: 10px; }
  #appView .title-row h1 { font-size: 32px; line-height: 1; }
  #appView .title-row .draft-status { margin-top: 10px; }
  #appView #motionForm { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; align-content: start; column-gap: 12px; }
  #appView #portraitStep { padding-right: 8px; }
  #appView #referenceStep { padding-left: 8px; }
  #appView .workflow-step { padding: 9px 0; }
  #appView .workflow-step legend { margin-bottom: 7px; font-size: 11px; }
  #appView .upload-zone { min-height: 66px; padding: 8px 10px; grid-template-columns: 34px minmax(0, 1fr); }
  #appView .upload-icon { width: 34px; height: 34px; }
  #appView .upload-action { display: none; }
  #appView .portrait-file { min-height: 58px; padding: 5px 7px; grid-template-columns: 44px minmax(0, 1fr) 20px 30px; }
  #appView .portrait-file img { width: 44px; height: 44px; }
  #appView .portrait-file .icon-button { width: 28px; height: 28px; }
  #appView .url-control, #appView .url-control input { height: 42px; }
  #appView .url-icon { top: 12px; }
  #appView .paste-button { top: 3px; }
  #appView .input-status { top: 11px; }
  #appView .tiktok-preview:not([hidden]) { margin-bottom: 6px; display: grid; grid-template-columns: 72px minmax(0, 1fr); }
  #appView .tiktok-preview-media { height: 72px; }
  #appView .tiktok-preview-copy { padding: 7px 8px; gap: 4px; }
  #appView .tiktok-preview-header span:last-child { display: none; }
  #appView .tiktok-preview p { font-size: 8px; }
  #appView .compact-step, #appView .consent-row, #appView .action-row { grid-column: 1 / -1; }
  #appView .compact-step { padding: 10px 0; }
  #appView .compact-step .mode-compact-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #appView .compact-step .mode-compact-picker-trigger { height: 40px; }
  #appView .compact-step .mode-compact-picker--model .mode-compact-picker-menu { width: 350px; }
  #appView .consent-row { min-height: 38px; }
  #appView .action-row { padding-top: 8px; }
  #appView .generate-button { height: 42px; }
  #appView #motionForm .generation-credit-summary { display: none; }
  #appView .preview-panel { min-height: 0; overflow: hidden; padding: 12px 24px 10px; grid-template-rows: 34px minmax(0, 1fr) 40px; }
  #appView .preview-stage { min-height: 0; padding: 6px 0 8px; }
  #appView .video-frame { width: auto; max-width: 100%; height: 100%; max-height: 100%; }
  #appView .preview-footer { padding-top: 7px; }
}

@media (min-width: 1001px) and (max-height: 720px) {
  #appView .creator-inner { padding-top: 9px; }
  #appView .title-row h1 { font-size: 27px; }
  #appView .title-row .draft-status { margin-top: 6px; }
  #appView .workflow-step { padding: 6px 0; }
  #appView .consent-row { min-height: 32px; }
}

/* ==========================================================================
   Carrusel superior de motores de IA
   Línea fina fija en la parte alta de la pantalla (menú principal y Studio).
   ========================================================================== */

.dashboard-view {
  --ai-ticker-h: 30px;
  padding-top: var(--ai-ticker-h);
}

.ai-engine-ticker {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  height: var(--ai-ticker-h, 30px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #071a37 0%, #0f3672 42%, #1c5cb8 50%, #0f3672 58%, #071a37 100%);
  box-shadow:
    0 1px 0 rgba(120, 183, 255, .55),
    0 0 16px rgba(45, 126, 255, .5),
    0 0 34px rgba(45, 126, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
  user-select: none;
}

.ai-engine-track {
  flex: 0 0 auto;
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ai-engine-scroll 190s linear infinite;
}

.ai-engine-ticker:hover .ai-engine-track,
.ai-engine-ticker:focus-within .ai-engine-track {
  animation-play-state: paused;
}

.ai-engine-half {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

@keyframes ai-engine-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.ai-engine-chip {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fdfdff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .88;
  transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease;
  cursor: default;
}

.ai-engine-chip::after {
  content: '';
  width: 3px;
  height: 3px;
  margin-left: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

.ai-engine-chip-logo {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #fff;
  transition: filter 180ms ease, transform 180ms ease;
}

.ai-engine-chip:hover {
  color: #fff;
  opacity: 1;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--ai-engine-neon, #fff),
    0 0 26px color-mix(in srgb, var(--ai-engine-neon, #fff) 65%, transparent);
}

.ai-engine-chip:hover .ai-engine-chip-logo {
  transform: scale(1.16);
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 10px var(--ai-engine-neon, #fff))
    drop-shadow(0 0 18px color-mix(in srgb, var(--ai-engine-neon, #fff) 65%, transparent));
}

/* Ajustes de las capas fijas para dejar libre la franja del carrusel. */
.dashboard-view > .dashboard-sidebar {
  top: var(--ai-ticker-h);
  height: calc(100vh - var(--ai-ticker-h));
  height: calc(100dvh - var(--ai-ticker-h));
}

.dashboard-view .dashboard-topbar {
  top: var(--ai-ticker-h);
}

@media (max-width: 980px) {
  .dashboard-view > .dashboard-backdrop { top: var(--ai-ticker-h); }
}

@media (max-width: 620px) {
  .dashboard-view { --ai-ticker-h: 26px; }
  .ai-engine-chip { padding: 0 14px; font-size: 9.5px; gap: 6px; }
  .ai-engine-chip::after { margin-left: 14px; }
  .ai-engine-chip-logo { width: 12px; height: 12px; }
  .ai-engine-track { animation-duration: 130s; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-engine-track { animation: none; }
  .ai-engine-ticker { overflow-x: auto; }
}

/* ==========================================================================
   Barra de menú compacta al hacer scroll
   La cabecera (logo/menú, navegación y acciones) se encoge un poco en
   cuanto se baja la pantalla y recupera su tamaño normal al volver arriba.
   ========================================================================== */

.dashboard-topbar {
  transition: height 260ms ease;
}

.dashboard-topbar.is-compact {
  height: 58px;
}

.dashboard-topbar .dashboard-menu-button,
.dashboard-topbar .dashboard-breadcrumb,
.dashboard-topbar .dashboard-create-trigger,
.dashboard-topbar .studio-top-center,
.dashboard-topbar .dashboard-credit-pill,
.dashboard-topbar .dashboard-plans-button,
.dashboard-topbar .dashboard-login-button,
.dashboard-topbar .dashboard-register-button,
.dashboard-topbar .profile-button {
  transition: transform 260ms ease;
}

.dashboard-topbar.is-compact .dashboard-menu-button,
.dashboard-topbar.is-compact .dashboard-breadcrumb {
  transform: scale(.88);
  transform-origin: left center;
}

.dashboard-topbar.is-compact .dashboard-create-trigger,
.dashboard-topbar.is-compact .studio-top-center {
  transform: scale(.88);
  transform-origin: center center;
}

.dashboard-topbar.is-compact .dashboard-credit-pill,
.dashboard-topbar.is-compact .dashboard-plans-button,
.dashboard-topbar.is-compact .dashboard-login-button,
.dashboard-topbar.is-compact .dashboard-register-button,
.dashboard-topbar.is-compact .profile-button {
  transform: scale(.88);
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-topbar,
  .dashboard-topbar .dashboard-menu-button,
  .dashboard-topbar .dashboard-breadcrumb,
  .dashboard-topbar .dashboard-create-trigger,
  .dashboard-topbar .studio-top-center,
  .dashboard-topbar .dashboard-credit-pill,
  .dashboard-topbar .dashboard-plans-button,
  .dashboard-topbar .dashboard-login-button,
  .dashboard-topbar .dashboard-register-button,
  .dashboard-topbar .profile-button {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Bubble menu de navegación rápida (solo móvil)                       */
/* ------------------------------------------------------------------ */
/* Franja flotante con 5 accesos: Menú, Modos creativos, marca (centro,
   más grande, va a Vidreum Studio), Proyectos y Perfil. El resalte
   ".mobile-bubble-highlight" se desliza y rebota (easing "back-out") hasta
   el icono activo — ver el JS al final de dashboard.js. Reutiliza
   data-dashboard-target / data-dashboard-page, ya escuchados por
   dashboard.js, así que la navegación en sí no necesita JS nuevo. */
.mobile-bubble-menu {
  position: fixed;
  z-index: 25;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 10px;
  /* Arrastrar el dedo por la franja no debe hacer scroll de la página. */
  touch-action: none;
  border: 1px solid rgba(96, 178, 255, .3);
  border-radius: 999px;
  /* Más transparente que antes: deja pasar algo del contenido de detrás,
     apoyado en el desenfoque (antes el fondo era opaco al 100% y el
     backdrop-filter no se apreciaba). */
  background: linear-gradient(135deg, rgba(6, 8, 16, .74) 0%, rgba(13, 20, 32, .74) 60%, rgba(14, 22, 38, .74) 100%);
  box-shadow:
    0 0 0 1px rgba(96, 178, 255, .12),
    0 18px 40px rgba(0, 0, 0, .5),
    0 4px 18px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
}

/* Centrada con transform (translate al centro del icono + retroceso del
   50% de su propio ancho/alto) en vez de left/top fijos: así el ancho puede
   cambiar (ver JS) sin descuadrar el centrado, y siempre queda centrada de
   verdad sobre el símbolo en vez de sobre su borde izquierdo. */
.mobile-bubble-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  width: 60px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 130, 235, .95), rgba(15, 79, 171, .95));
  box-shadow:
    0 0 0 1px rgba(122, 178, 255, .4),
    0 0 22px rgba(64, 156, 255, .55),
    0 6px 16px rgba(4, 20, 56, .5);
  pointer-events: none;
  transition: transform 480ms cubic-bezier(.34, 1.56, .64, 1), width 480ms cubic-bezier(.34, 1.56, .64, 1);
}

.mobile-bubble-item {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #7f8b9c;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: color 220ms ease, transform 180ms cubic-bezier(.34, 1.56, .64, 1);
}

.mobile-bubble-item .icon {
  width: 21px;
  height: 21px;
}

.mobile-bubble-item.is-active {
  color: #fff;
}

.mobile-bubble-item:active {
  transform: scale(.88);
}

.mobile-bubble-item.is-bouncing {
  animation: mobile-bubble-item-pop 480ms cubic-bezier(.34, 1.56, .64, 1);
}

/* El logo de marca (centro): más grande que el resto y ligeramente elevado
   sobre la franja, con su propio halo — no participa en el resalte azul
   deslizante (va a otra página, no a una sección del dashboard). */
.mobile-bubble-item-brand {
  width: 58px;
  height: 58px;
  margin-top: -14px;
  border-radius: 999px;
  background: linear-gradient(160deg, #14345f, #0a1c38);
  border: 1px solid rgba(122, 178, 255, .5);
  box-shadow:
    0 0 0 5px #0a0c13,
    0 0 26px rgba(64, 156, 255, .55),
    0 10px 22px rgba(0, 0, 0, .5);
  text-decoration: none;
}

.mobile-bubble-item-brand:active {
  transform: scale(.9);
}

.mobile-bubble-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(120, 180, 255, .7));
}

@keyframes mobile-bubble-item-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  70% { transform: scale(.92); }
  100% { transform: scale(1); }
}

@media (max-width: 980px) {
  .mobile-bubble-menu { display: flex; }

  /* El chat "vidreum bot" (vidreum-bot.css, z-index 20000) flota abajo a la
     derecha — sin esto quedaría tapado por/encima de esta franja. Solo se
     aplica cuando el bubble menu existe en la página (índex.html). */
  body:has(.mobile-bubble-menu) .vbot { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 460px) {
  .mobile-bubble-menu { left: 10px; right: 10px; height: 58px; }
  .mobile-bubble-highlight,
  .mobile-bubble-item { width: 42px; height: 42px; }
  .mobile-bubble-item-brand { width: 54px; height: 54px; margin-top: -12px; }
}

/* La vista de iniciar sesión/registrarse (#authView) va a pantalla completa
   y no tiene ninguna sección del dashboard a la que navegar desde aquí: el
   menú de burbujas inferior no pinta nada ahí. Se oculta en cualquier
   tamaño de pantalla (aunque solo llega a mostrarse por debajo de 980px). */
body:has(#authView:not([hidden])) .mobile-bubble-menu {
  display: none;
}

/* La vista de planes de suscripción (#subscriptionPlans) también satura de
   espacio en móvil a pantalla completa: se oculta igual que en #authView. */
@media (max-width: 980px) {
  body:has(#subscriptionPlans:not([hidden])) .mobile-bubble-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bubble-highlight { transition: none; }
  .mobile-bubble-item { transition: color 220ms ease; }
  .mobile-bubble-item.is-bouncing { animation: none; }
}

/* La galería está desactivada en móvil: ni la marquesina del menú principal
   (#dashboardGallery) ni la página /galeria-3d.html se muestran por debajo de
   este ancho, así que también se ocultan todos los enlaces que llevan hasta
   ella. Mismo punto de corte (980px) que usa galeria-3d.js para no cargarla y
   que dashboard.js para no descargar sus imágenes. */
@media (max-width: 980px) {
  .gallery-desktop-only { display: none !important; }
}

/* Etiqueta flotante de los botones del menú lateral cuando está plegado
   (la crea sidebar-tooltip.js). position:fixed para no quedar recortada por
   el overflow del propio menú. */
.sidebar-tooltip {
  position: fixed;
  z-index: 2147483000;
  padding: 9px 14px;
  color: #ffffff;
  background: #000000;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 12px rgba(45, 126, 255, .35);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
}

.sidebar-tooltip.is-visible {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Variante sobre el botón (controles de Vidreum Studio): descripción breve. */
.sidebar-tooltip.is-above {
  max-width: 240px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, calc(-100% + 4px));
}

.sidebar-tooltip.is-above.is-visible {
  transform: translate(-50%, -100%);
}

/* Neón azul que recorre el borde de la etiqueta (mismo efecto que el botón
   Dirección de Vidreum Studio): conic-gradient giratorio recortado con
   máscara para que solo se vea el anillo del borde. */
@property --sidebar-tip-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.sidebar-tooltip::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--sidebar-tip-angle), rgba(45, 126, 255, .25) 0 45%, rgba(45, 126, 255, .9) 74%, #8fe9ff 90%, rgba(45, 126, 255, .25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px rgba(64, 150, 255, .9));
  animation: sidebar-tip-spin 3s linear infinite;
  pointer-events: none;
}

@keyframes sidebar-tip-spin {
  to { --sidebar-tip-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-tooltip::before { animation: none; }
}

.sidebar-tooltip.is-below {
  max-width: 240px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, -4px);
}

.sidebar-tooltip.is-below.is-visible {
  transform: translate(-50%, 0);
}