:root{--bg:#05060a;--panel:#0a0d14;--panel2:#101521;--line:#202638;--text:#f6f4ff;--muted:#878fa3;--purple:#8b3dff;--purple2:#b44cff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}a{text-decoration:none;color:inherit}
.topbar{height:72px;display:flex;align-items:center;gap:30px;padding:0 5vw;border-bottom:1px solid #171b26;background:rgba(5,6,10,.91);backdrop-filter:blur(15px);position:sticky;top:0;z-index:30}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand strong{font-size:19px}.brand strong span{color:var(--purple2)}.logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#6a24f8,#b849ff);font-weight:900;font-size:22px}.topbar nav{display:flex;gap:23px;color:#9aa1b3;font-size:13px}.btn{border:1px solid #293045;color:white;background:#0c1019;padding:11px 17px;border-radius:11px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.btn.primary{border-color:#8537f1;background:linear-gradient(135deg,#6d24f8,#a23cff);box-shadow:0 10px 35px #5f20db31}.btn.big{padding:15px 24px;font-size:16px}
.hero{text-align:center;padding:105px 5vw 70px;min-height:760px;position:relative;overflow:hidden}.halo{position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:500px;background:#7422ff;filter:blur(150px);opacity:.3;pointer-events:none}.badge,.kicker{color:#b87aff;font-weight:900;font-size:11px;letter-spacing:.14em}.hero h1{font-size:clamp(42px,6vw,80px);line-height:1.03;letter-spacing:-.055em;margin:18px 0}.hero h1 span{background:linear-gradient(90deg,#fff,#ae73ff);background-clip:text;color:transparent}.hero>p,.lead{max-width:720px;margin:0 auto 29px;color:#929aaf;line-height:1.65;font-size:17px}.heroStats{display:flex;justify-content:center;gap:70px;margin:50px 0 40px}.heroStats div{display:flex;flex-direction:column}.heroStats b{font-size:25px}.heroStats small{color:#70788d;margin-top:4px}.gallery{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.gallery article{height:275px;border:1px solid #23293a;border-radius:17px;overflow:hidden;position:relative;background:white}.gallery article>span,.compareDemo span{position:absolute;top:11px;left:11px;background:#161a27;border-radius:7px;padding:5px 8px;font-size:9px;font-weight:900;z-index:2}.fake{width:100%;height:100%}.photo{background:radial-gradient(ellipse at 50% 38%,#d8d9dc 0 22%,transparent 23%),radial-gradient(ellipse at 50% 39%,#34363d 0 42%,#111218 43% 100%)}.line{background-color:#fff;background-image:repeating-radial-gradient(ellipse at 50% 42%,transparent 0 13px,#9d50f3 14px 15px,transparent 16px 26px),linear-gradient(115deg,transparent 45%,#9d50f3 46% 47%,transparent 48% 55%,#9d50f3 56% 57%,transparent 58%)}.line2{opacity:.88}.line3{background-image:repeating-linear-gradient(45deg,transparent 0 8px,#b16cff 9px,transparent 10px),repeating-radial-gradient(ellipse at 50% 42%,transparent 0 13px,#8b3dff 14px 15px,transparent 16px 26px)}
.section{text-align:center;padding:95px 6vw;max-width:1320px;margin:auto}.section.alt{max-width:none;background:#090b11;border-top:1px solid #161b26;border-bottom:1px solid #161b26}.section h2{font-size:clamp(33px,4vw,54px);letter-spacing:-.04em;margin:12px 0 16px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;margin-top:45px}.cards article{padding:27px;border:1px solid var(--line);border-radius:18px;background:var(--panel);min-height:210px}.cards i{font-style:normal;color:#9c55ff;font-weight:900}.cards h3{margin-top:28px}.cards p{color:#878fa3;line-height:1.6}.compareDemo{max-width:930px;height:470px;margin:35px auto;display:grid;grid-template-columns:1fr 44px 1fr;align-items:center}.compareDemo>div:not(.swap){height:100%;position:relative;border-radius:18px;overflow:hidden;border:1px solid #22293a}.swap{width:44px;height:44px;border-radius:50%;background:#111520;border:1px solid #373e52;display:grid;place-items:center;margin:0 -22px;z-index:3}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;margin-top:45px}.pricing article{padding:28px;border-radius:18px;border:1px solid var(--line);background:var(--panel);position:relative}.pricing article.hot{border-color:#7835df;box-shadow:0 0 55px #5e23d723}.pricing em{position:absolute;right:18px;top:18px;font-style:normal;font-size:9px;color:#bd81ff;font-weight:900}.pricing strong{display:block;font-size:35px;margin:17px 0}.pricing strong small{font-size:13px;color:#7e8699}.pricing ul{padding:0;list-style:none;color:#a5adbd;line-height:2}.pricing li:before{content:"✓ ";color:#9b51ff}.pricing button{width:100%;padding:12px;border-radius:10px;border:1px solid #282e40;background:#111520;color:#666e82}.faq{max-width:850px;margin:40px auto;text-align:left}.faq details{padding:19px 2px;border-bottom:1px solid var(--line)}.faq summary{font-weight:750;cursor:pointer}.faq p{color:#8a92a7;line-height:1.6}footer{padding:55px 6vw;border-top:1px solid #171b26;color:#7b8397}footer p{margin:18px 0 30px}
.creatorBody{overflow:hidden}.creatorTop{position:relative}.modelBadge{font-size:10px;padding:7px 10px;border-radius:20px;background:#17121e;color:#c99dff;border:1px solid #382653}.modelBadge.ready{background:#0d1b16;color:#67e5a2;border-color:#1c4b35}.modelBadge.error{background:#211013;color:#ff8c94;border-color:#63252c}.creator{height:calc(100vh - 72px);display:grid;grid-template-columns:290px 1fr}.sidebar{background:#080a10;border-right:1px solid var(--line);padding:21px;overflow:auto}.stepLabel{font-size:10px;color:#a45cff;font-weight:900;margin:5px 0 10px}.drop{height:160px;border:1px dashed #373e52;border-radius:14px;background:#0b0e15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-align:center}.drop input{display:none}.drop small{font-size:10px;color:#777f93}.upload{font-size:28px}.fileInfo{display:grid;grid-template-columns:43px 1fr 28px;gap:9px;align-items:center;padding:8px;margin:10px 0;border:1px solid #22283a;border-radius:10px;background:#0d1019}.fileInfo img{width:43px;height:43px;object-fit:cover;border-radius:7px}.fileInfo small{display:block;color:#777f93}.fileInfo button{border:0;background:transparent;color:white;font-size:19px}.styles{display:grid;gap:7px}.styles button{padding:11px;border-radius:10px;border:1px solid #242b3d;background:#0d111a;color:white;text-align:left;cursor:pointer}.styles button.active{background:#29144c;border-color:#8a41f1}.styles small{display:block;color:#747d92;margin-top:2px}.simpleOpts{display:grid;gap:11px;margin:17px 0}.simpleOpts label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a7afbf}.full{width:100%}.full:disabled{opacity:.4;cursor:not-allowed}.privacy{font-size:9px;color:#656d82;line-height:1.5}.workspace{padding:18px;background:#07090e;display:flex;flex-direction:column;min-width:0}.workspaceHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.workspaceHead h1{font-size:18px;margin:0}.workspaceHead p{font-size:10px;color:#798196;margin:4px 0}.state{font-size:10px;background:#111622;padding:7px 10px;border-radius:20px;color:#8f98ad}.previewGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0}.previewPanel{border:1px solid #202638;border-radius:15px;position:relative;overflow:hidden;display:grid;place-items:center;background:#090c12;min-width:0;min-height:0}.previewPanel.stencilPanel{background:white}.panelTag{position:absolute;top:10px;left:10px;background:#111520;padding:5px 7px;border-radius:6px;font-size:9px;font-weight:900;z-index:3}.panelTag.purple{background:#7e34eb}.previewPanel img,.previewPanel canvas{
display:block;
width:auto;
height:auto;
max-width:calc(100% - 24px);
max-height:calc(100% - 24px);
object-fit:contain;
margin:auto;
}
.previewPanel canvas{background:transparent}
.previewPanel{padding:12px}.previewPanel [hidden]{display:none!important}.placeholder{color:#596175;font-size:11px;text-align:center}.placeholder.dark{color:#a1a4ad}.bottomBar{display:flex;align-items:center;gap:9px;padding-top:11px}.bottomBar>div{margin-right:auto}.bottomBar b,.bottomBar small{display:block}.bottomBar small{font-size:9px;color:#747d91;margin-top:3px}.bottomBar button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:900px){.topbar nav{display:none}.gallery,.cards,.pricing{grid-template-columns:1fr 1fr}.creatorBody{overflow:auto}.creator{height:auto;grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line)}.workspace{min-height:760px}.previewGrid{min-height:560px}.compareDemo{height:auto;grid-template-columns:1fr}.compareDemo>div:not(.swap){height:380px}.swap{display:none}}
@media(max-width:620px){.topbar{padding:0 14px}.brand strong{font-size:16px}.modelBadge{display:none}.hero{padding-top:70px}.gallery{grid-template-columns:1fr 1fr}.gallery article{height:205px}.heroStats{gap:20px}.cards,.pricing{grid-template-columns:1fr}.previewGrid{grid-template-columns:1fr;min-height:900px}.bottomBar{flex-wrap:wrap}.bottomBar>div{width:100%}.bottomBar .btn{flex:1}}

/* V2: visor completo, sin recortes */
.previewGrid{min-height:0}
.previewPanel{contain:layout paint}
@media(min-width:901px){
  .workspace{height:calc(100vh - 72px)}
  .previewGrid{height:calc(100vh - 185px)}
}
@media(max-width:900px){
  .previewPanel{min-height:360px}
}
@media(max-width:620px){
  .previewPanel{min-height:420px}
}

/* V3 — ajuste REAL de imagen completa dentro del visor */
.previewPanel{
  overflow:hidden !important;
  position:relative;
}
.previewPanel img,
.previewPanel canvas{
  position:absolute;
  inset:0;
  margin:auto !important;
  display:block;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
}
.previewPanel img[hidden],
.previewPanel canvas[hidden]{
  display:none !important;
}

/* V4 — Línea de agua */
.waterLineBox{
  border:1px solid #252c3e;
  background:#0d111a;
  border-radius:11px;
  padding:11px 12px;
}
.waterLineHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.waterLineHead b{
  display:block;
  font-size:11px;
  color:#f3f1fb;
}
.waterLineHead small{
  display:block;
  margin-top:3px;
  font-size:9px;
  color:#737d92;
  line-height:1.35;
}
.switch{
  position:relative;
  width:40px;
  height:22px;
  flex:0 0 auto;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.sliderSwitch{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#2a3040;
  border:1px solid #3a4257;
  border-radius:999px;
  transition:.2s;
}
.sliderSwitch:before{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  left:2px;
  top:2px;
  background:white;
  border-radius:50%;
  transition:.2s;
  box-shadow:0 1px 5px #0008;
}
.switch input:checked + .sliderSwitch{
  background:linear-gradient(135deg,#6d25f9,#a83cff);
  border-color:#8b3dff;
}
.switch input:checked + .sliderSwitch:before{
  transform:translateX(18px);
}

/* V6.4 Neural Refinada — controles añadidos sin cambiar la base estable */
.neuralLabel{margin-top:16px}.refineOpts{display:grid;gap:9px;margin-bottom:11px}.rangeRow{display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:center;font-size:11px;color:#a7afbf}.rangeRow b{font-size:10px;color:#d8c6ff;background:#171221;border:1px solid #332047;border-radius:7px;padding:3px 6px}.rangeRow input{grid-column:1/-1;width:100%;accent-color:#8b3dff}.toggleBox{border:1px solid #252c3e;background:#0d111a;border-radius:11px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.toggleBox b{display:block;font-size:11px;color:#f3f1fb}.toggleBox small{display:block;margin-top:3px;font-size:9px;color:#737d92;line-height:1.35}.compactOpts{margin:9px 0}.resetBtn{margin-top:7px}.progressTrack{height:3px;background:#151a24;border-radius:999px;overflow:hidden;margin-top:8px}.progressTrack>div{width:0;height:100%;background:linear-gradient(90deg,#6d25f9,#b559ff);transition:width .25s ease}.creator{grid-template-columns:305px 1fr}.sidebar{padding:16px 18px}.drop{height:132px}.styles button{padding:9px 10px}.simpleOpts{gap:8px;margin:10px 0}.workspace{padding:14px 16px}.previewGrid{gap:12px}.bottomBar{padding-top:8px}
@media(min-width:901px){.workspace{height:calc(100vh - 72px)}.previewGrid{height:calc(100vh - 188px)}}


/* ===== TattooConfort V9 Drawing Engine ===== */
:root{--v9-purple:#7433ff;--v9-panel:#0c1018}
html,body{min-height:100%}
.creatorBody{overflow:hidden}
.v9EngineCard{padding:10px 11px;border:1px solid #22293a;border-radius:11px;background:#090d14;margin-bottom:10px}
.v9EngineCard b{display:block;font-size:12px;margin-bottom:3px}
.v9EngineCard small{display:block;color:#7f899d;line-height:1.35}
.v9EngineCard.ready{border-color:#184c39;background:#081711}
.v9EngineCard.loading{border-color:#443177;background:#130d22}
.v9EngineCard.error{border-color:#6a2a32;background:#1b0b0e}
.previewCanvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 28px);max-height:calc(100% - 28px);object-fit:contain}
.previewPanel img.previewImage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 28px);max-height:calc(100% - 28px);object-fit:contain}
.modelProgress{height:5px;background:#161c29;border-radius:999px;overflow:hidden;margin-top:8px}
.modelProgress>i{display:block;width:0;height:100%;background:linear-gradient(90deg,#6730ff,#a66cff);transition:width .2s}
.smallHelp{font-size:10px;color:#747d90;line-height:1.45;margin-top:8px}
.exportHint{font-size:10px;color:#70798b}
#shadowRecoveryRow{transition:opacity .2s}
body.generating #generate{opacity:.75;pointer-events:none}
@media(max-height:800px) and (min-width:900px){
  .creatorTop{height:54px}
  .creator{height:calc(100vh - 54px)}
  .sidebar{padding-top:10px;padding-bottom:10px}
  .stepLabel{margin-top:8px;margin-bottom:5px}
  .drop{min-height:82px}
  .styles button{padding:7px 9px}
  .rangeRow{margin:6px 0}
  .toggleBox{padding:7px 8px}
}


/* ===== V9.1 FINAL VIEWPORT FIX ===== */
.previewPanel{
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  padding:14px !important;
}
.previewPanel > img.previewImage,
.previewPanel > canvas.previewCanvas{
  position:absolute !important;
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  width:auto !important;
  height:auto !important;
  max-width:calc(100% - 28px) !important;
  max-height:calc(100% - 28px) !important;
  object-fit:contain !important;
}
.previewPanel > img.previewImage[hidden],
.previewPanel > canvas.previewCanvas[hidden]{
  display:none !important;
}
.previewGrid{
  min-height:0 !important;
  overflow:hidden !important;
}
.workspace{
  overflow:hidden !important;
}



/* =========================================================
   TattooConfort — MOBILE RESPONSIVE PATCH
   Añadir al FINAL de styles.css
   ========================================================= */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, canvas, video {
  max-width: 100%;
}

/* Tablet */
@media (max-width: 900px) {
  .topbar,
  .creatorTop {
    min-height: 64px;
    height: auto;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .brand {
    min-width: 0;
  }

  .brand strong {
    font-size: 18px;
    white-space: nowrap;
  }

  .logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  .topbar .btn,
  .creatorTop .btn,
  .topbar .badge,
  .topbar .modelBadge {
    width: auto !important;
    flex: 0 0 auto;
  }

  .app,
  .creator {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .sidebar {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line, #222a3a);
    padding: 18px 16px 22px !important;
  }

  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  .workHead,
  .workspaceHead {
    align-items: flex-start !important;
    gap: 10px;
  }

  .workHead h1,
  .workspaceHead h1 {
    font-size: 22px !important;
  }

  .previews,
  .previewGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
  }

  .pane,
  .previewPanel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(430px, 105vw, 720px) !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .pane img,
  .pane canvas,
  .previewPanel img,
  .previewPanel canvas {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 28px) !important;
    max-height: calc(100% - 28px) !important;
    object-fit: contain !important;
  }

  .bottom,
  .bottomBar {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .bottom > div,
  .bottomBar > div {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .bottom button,
  .bottomBar button {
    flex: 1 1 180px !important;
    min-height: 46px;
  }

  input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  .row,
  .rangeRow {
    width: 100% !important;
  }

  .drop {
    width: 100% !important;
    min-height: 150px !important;
  }

  .fileInfo {
    width: 100% !important;
  }
}

/* Phone */
@media (max-width: 620px) {
  body {
    font-size: 15px;
  }

  .topbar,
  .creatorTop {
    padding: 10px 12px !important;
  }

  .brand strong {
    font-size: 17px !important;
  }

  .topbar .badge,
  .topbar .modelBadge {
    font-size: 10px !important;
    padding: 7px 9px !important;
  }

  .sidebar {
    padding: 16px 14px 20px !important;
  }

  .workspace {
    padding: 14px !important;
  }

  .sectionTitle,
  .stepLabel {
    margin-top: 18px !important;
    font-size: 11px !important;
  }

  .drop {
    height: auto !important;
    min-height: 170px !important;
    padding: 22px 16px !important;
  }

  .drop b {
    font-size: 17px !important;
  }

  .styles {
    gap: 9px !important;
  }

  .styles button {
    min-height: 72px !important;
    padding: 13px 14px !important;
  }

  .styles button b {
    font-size: 16px !important;
  }

  .styles button small {
    font-size: 12px !important;
  }

  .row,
  .rangeRow {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 7px 10px !important;
    align-items: center !important;
    margin-bottom: 16px !important;
  }

  .row input[type="range"],
  .rangeRow input[type="range"] {
    grid-column: 1 / -1;
  }

  .switchRow,
  .toggleBox,
  .engineDetail {
    padding: 12px !important;
  }

  button.primary,
  .primary,
  .btn.full {
    min-height: 50px !important;
    font-size: 14px !important;
  }

  .workHead,
  .workspaceHead {
    display: block !important;
  }

  .status,
  .state {
    display: inline-flex !important;
    margin-top: 8px !important;
    max-width: 100%;
    white-space: normal !important;
  }

  .previews,
  .previewGrid {
    gap: 16px !important;
  }

  .pane,
  .previewPanel {
    min-height: clamp(420px, 128vw, 640px) !important;
    aspect-ratio: 3 / 4 !important;
  }

  .tag,
  .panelTag {
    top: 10px !important;
    left: 10px !important;
    font-size: 10px !important;
    padding: 6px 9px !important;
  }

  .empty,
  .placeholder {
    max-width: 75%;
    text-align: center;
    line-height: 1.45;
  }

  .bottom,
  .bottomBar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .bottom button,
  .bottomBar button {
    width: 100% !important;
    flex: none !important;
  }

  /* Prevent desktop fixed-width preview/editor columns */
  [class*="preview"] {
    min-width: 0;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .topbar,
  .creatorTop {
    gap: 7px !important;
  }

  .brand strong {
    font-size: 15px !important;
  }

  .logo {
    width: 31px !important;
    height: 31px !important;
  }

  .sidebar,
  .workspace {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .pane,
  .previewPanel {
    min-height: 420px !important;
  }
}