:root{ --font-ui: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
    body { font-family: var(--font-ui); }
    html, body { max-width:100%; overflow-x:hidden; 
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

    /* Fondo general sin imagen: todo lo visual viene del stack #bgStack */
    .bg-custom  { background:#0e202d; }

    /* Nuevo stack de fondo por capas + parallax */
    .bg-stack{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }
    .bg-layer{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); will-change: transform, opacity; }
    /* Equivalente a background-size:cover/background-position:center para no estirar */
    /* Las capas llegan con .loaded desde el servidor, así el fondo también existe
       sin JavaScript; la animación conserva el fundido de entrada. */
    .bg-layer img{ display:block; width:100vw; height:100vh; object-fit:cover; object-position:center center; opacity:0; filter:var(--flt,none); }
    .bg-layer.loaded img{ opacity:var(--op,1); animation: bgLayerIn .9s ease both; }
    @keyframes bgLayerIn { from { opacity:0; } to { opacity:var(--op,1); } }
    /* Ajustes por capa (opacidad/efectos base) */
    .bg-blue    img{ --op:.95; }
    .bg-ring    img{ --op:.75; }
    .bg-dest    img{ --op:.85; --flt: drop-shadow(0 0 18px rgba(255,255,255,.08)); }
    .bg-stars   img{ --op:.78; }
    .bg-refl    img{ --op:.65; --flt: blur(.2px) drop-shadow(0 4px 12px rgba(255,255,255,.08)); }

    .bg-body-tertiary { background:#ffffff14 !important; }

    /* Stage de preview */
    .stage {
      width: 100%;
      max-width: 570px;
      aspect-ratio: 3 / 4;
      position: relative;
      background: #1e1e1e;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,.35) inset;
      margin-inline: auto;
      user-select: none;
    }

    /* Overlay de guardado (microinteracción móvil) */
    .saving-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1040; opacity:0; transition:opacity .25s ease; pointer-events:none; }
    .saving-overlay.show{ opacity:1; }
    .saving-box{ display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:.5rem; background:rgba(0,0,0,.35); box-shadow:0 4px 12px rgba(0,0,0,.25); color:#fff; font-size:.95rem; }

    /* Ayuda a iOS a mostrar el menú de guardado al pulsar la imagen */
    #downloadModal img{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:default; pointer-events:auto; display:block; width:100%; height:auto; }
    .modal{ overflow-x:hidden; }
    .modal-open{ overflow:hidden; padding-right: var(--bs-scrollbar-width); }
    #downloadModal .modal-dialog{ margin: .5rem; }
    #downloadModal .modal-content{ touch-action: manipulation; }

    /* Ajustes para desktop - canvas más grande */
    @media (min-width: 992px) {
      .stage {
        height: auto;               /* Evitar dependencia del alto del viewport */
        width: min(60vw, 600px);    /* Control por ancho, respeta aspect-ratio */
        max-width: 720px;
      }
    }
    .layer {
      position: absolute;
      top: var(--top,0%);
      left: var(--left,0%);
      width: var(--w,100%);
      z-index: var(--z, 1);
      filter: var(--filter, none);
      pointer-events: none;
      transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animaciones para cambio de personaje */
    .stage.character-changing {
      overflow: hidden;
    }
    
    .stage.character-changing::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, rgba(247,201,72,0.15) 0%, transparent 70%);
      z-index: 1000;
      animation: characterGlow 0.8s ease-out;
      pointer-events: none;
    }

    @keyframes characterGlow {
      0% {
        opacity: 0;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
      100% {
        opacity: 0;
        transform: scale(1);
      }
    }

    .layer.slide-out {
      transform: translateX(-100%) scale(0.9);
      opacity: 0;
    }

    .layer.slide-in {
      transform: translateX(100%) scale(0.9);
      opacity: 0;
    }

    .layer.fade-in {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
    #lay-bg{
      background-size: cover;
      height: auto !important;
      width: 100%;
    }

    /* Banda inferior de texto (estrellas pegadas) */
    .text-overlay {
      position: absolute;
      z-index: 99;
      pointer-events: none;
      color:#fff;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      user-select: none;
      filter: none !important;
      mix-blend-mode: normal !important;
    }
    .text-overlay.band{
      left:50%; bottom:0; transform:translateX(-50%); width:100%;
      height:var(--band-h, 14%);
      display:flex; align-items:center; justify-content:center;
    }
    .band .belt{
      display:flex; align-items:center; gap:.25em; /* estrellas "pegadas" al texto */
      padding-inline: calc(0.04 * 100%);          /* inner pad proporcional */
    }
    .band .stars{ opacity:.75; letter-spacing:.03em; line-height:1.5; font-size: calc(1em * var(--star-scale, .25)); }
    .band .text{ white-space:nowrap; padding:0; }
    .text-overlay .text{
      font-family: "Sancreek", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 700;
      letter-spacing: .02em;
    }

    /* Controles */
    .form-control-color { padding: 0.25rem; }
    .color-card { background: var(--bs-body-tertiary-bg); border: 0; }
    .color-title { font-size: .8rem; opacity:.8; margin-bottom:.25rem; }

    /* Debug sliders */
    .debug-range { display: none !important; }
    body.debug .debug-range { display: grid !important; }

    /* Loader */
    .app-loader { position: fixed; inset: 0;
      background: linear-gradient(180deg, #111 0%, #1b1b1b 100%);
      display: grid; place-items: center; z-index: 9999;
      transition: opacity .35s ease, visibility .35s ease;
    }
    .app-loader.hide { opacity: 0; visibility: hidden; }
    .loader-box { display:flex; flex-direction:column; align-items:center; gap:.75rem;
      color:#fff; text-align:center; padding:1rem 1.25rem; border-radius:.75rem;
      background: rgba(255,255,255,0.05); box-shadow:0 10px 30px rgba(0,0,0,.35);
    }
    .spinner { width: 42px; height: 42px; border:4px solid rgba(255,255,255,.2);
      border-top-color:#f7c948; border-radius:50%; animation:spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loader-sub { font-size:.85rem; opacity:.75; }

    /* Selector de personaje */
    .char-card label { cursor:pointer; display:block; }
    .char-card img {
      width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:10px; background:#2b2b2b;
      transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
      outline: 2px solid transparent;
    }
    .char-card img:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 4px 12px rgba(0,0,0,.2);
    }
    .char-card input[type=radio]:checked + img {
      outline-color: #f7c948;
      box-shadow: 0 0 0 6px rgba(247,201,72,.25), 0 8px 20px rgba(247,201,72,.15);
      transform: translateY(-3px) scale(1.03);
    }
    .char-card.changing img {
      animation: characterSelect 0.6s ease-out;
    }
    
    @keyframes characterSelect {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1) rotateZ(2deg);
      }
      100% {
        transform: scale(1.03) translateY(-3px);
      }
    }
    .btn-success{ font-size: 1.3rem; background-color: #417B47; }
    .btn-success:focus {
        background-color:#22b23a;
    }
    /* Feedback táctil claro en el CTA de guardar */
    #btnSaveAndDownload:active{ transform: scale(0.98); filter: brightness(0.95); }
    #btnSaveAndDownload:focus-visible{ outline: 3px solid #f7c948; outline-offset: 2px; }
    
    /* ===== ARCO POWER/DENTAL (preview DOM) ===== */
    #arcDOM{
      position:absolute; left:50%; transform:translateX(-50%);
      top: var(--arc-top, 25%); /* Ajustable con CSS custom property */
      margin-left:-5px;
      z-index:1001; pointer-events:none;
      --arc-fill:    #165E82;   /* color de relleno principal */
      --arc-out:     #FCD116;   /* stroke externo amarillo */
      --arc-shadow:  rgba(0,0,0,.7);
      --arc-offset:  -2px;      /* Corrector manual de centrado */
    }
    #arcDOM .arc-row{ 
      position:relative; 
      display:flex; 
      align-items:center; 
      justify-content:center;
      gap:clamp(8px,2vw,20px); 
    }
    #arcDOM .arc-belt{ 
      height: clamp(22px, 6.5vw, 62px); 
      filter: drop-shadow(0 2px 1px rgba(0,0,0,.45));
      transform: translateY(-8px);
    }
    
    /* Nuevo contenedor principal del arco - layout flexbox */
    .arc-container {
      display: flex;
      align-items: center;
      justify-content: center;  /* Centrado perfecto */
      width: min(80%, 500px);   /* Protección: máximo 80% del canvas */
      max-width: 80vw;          /* Protección adicional basada en viewport */
      height: clamp(80px, 18vw, 140px);
      margin: 0 auto;
      margin-left: calc(50% + var(--arc-offset, -2px));  /* Corrector manual de centrado */
      padding: 0;               /* Sin padding para centrado perfecto */
      position: relative;
      transform: translateX(-50%);  /* Centrado absoluto */
    }
    
    /* Secciones del arco */
    .arc-section {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .left-section {
      flex: 1 1 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 8px;
    }
    
    .center-section {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
    }
    
    .right-section {
      flex: 1 1 auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 8px;
    }
    
    /* Estilos para texto del arco */
    .arc-text {
      font-family: "Sancreek", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 700;
      font-size: clamp(22px, 6vw, 42px);
      color: var(--arc-fill);
      text-shadow:
        /* Contorno dorado más grueso */
        -2px -2px 0 var(--arc-out),
        2px -2px 0 var(--arc-out),
        -2px 2px 0 var(--arc-out),
        2px 2px 0 var(--arc-out),
        -2px 0px 0 var(--arc-out),
        2px 0px 0 var(--arc-out),
        0px -2px 0 var(--arc-out),
        0px 2px 0 var(--arc-out),
        /* Sombras negras para simular línea interna */
        0 0 1px rgba(0,0,0,0.9),
        1px 1px 1px rgba(0,0,0,0.7),
        -1px -1px 1px rgba(0,0,0,0.7),
        1px -1px 1px rgba(0,0,0,0.6),
        -1px 1px 1px rgba(0,0,0,0.6),
        /* Glow dorado suave */
        0 0 6px var(--arc-out),
        /* Sombra de profundidad */
        0 4px 8px rgba(0,0,0,0.4);
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
      white-space: nowrap;
      position: relative;
      transform-origin: center bottom;
    }
    
    /* Curvatura CSS simple y confiable */
    #powerText {
      transform: rotate(-2deg) translateY(-4px);
      transform-origin: center center;
      letter-spacing: 0.1em;
    }
    
          #dentalText {
        transform: rotate(3deg) translateY(-4px);
        transform-origin: center center;
        letter-spacing: 0.05em;
      }
    
    /* Ocultar overlays del DOM para que preview == export (canvas) */
    #arcDOM {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none;
    }
    #textOverlay {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none;
    }
    
  /* Capa invisible que intercepta clic derecho sobre toda la página */
  .noclick-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: transparent;
  }

  /* ===== Marca de agua en toda la página ===== */
  .watermark {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    opacity: .12;
    display: grid;
    place-items: center;
    mix-blend-mode: lighten;
  }
  .watermark::before {
    content: attr(data-text);
    white-space: pre;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    transform: rotate(-22deg);
    font-size: clamp(2rem, 8vw, 6rem);
  }

  /* ===== Pantalla negra rápida si detectamos (de forma heurística) devtools muy abiertas ===== */
  .shield {
    display: none;
    position: fixed; inset: 0; z-index: 2000;
    background: #000;
  }
    .shield.active { display: block; }

  /* Cierre de plataforma Dental Games: vive en assets/css/landing.css (.mr-footer) */

  @media print {
    body * { display: none !important; }
    body::before {
      display: block !important;
      content: "Impresión deshabilitada";
      font: 700 24pt system-ui, sans-serif;
      color: #111;
      padding: 3cm;
    }
  }