/* ============ LA CASA DE LA IMPRESIÓN — el recorrido del acta ============
   Entrada-objeto, escenario y acompañante en su carril; la baraja de su
   oficio, los materiales que se tocan sobre la tarjeta y la prueba de
   imprenta firmada. Hereda el oficio de plaza.css (vacío, ámbar, serif)
   y conserva la lengua visual de las maquetas vivas de la casa. */
body.world--print{background:#050505}
.world--print .hero h1 em{color:var(--gold-soft)}

/* ---------- la entrada-objeto ---------- */
.entrada{position:relative;z-index:3;padding:9svh max(23px,calc(50% - 640px)) 4svh}
.entrada h1{margin:14px 0 0;font:400 clamp(38px,6vw,64px)/1.04 var(--serif);letter-spacing:-.02em;max-width:15em}
.entrada h1 em{color:var(--gold-soft)}
.en-line{margin:10px 0 0;font:italic 400 clamp(14px,1.8vw,16.5px)/1.45 var(--serif);color:rgba(255,255,255,.48)}
.precios-entrada{margin:20px 0 0;font:500 clamp(13px,1.9vw,16px)/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,250,238,.92)}
.precios-entrada b{color:var(--gold-soft);font-weight:600}
.precios-sep{margin:0 .9em;color:rgba(255,255,255,.35)}
.progreso{display:flex;gap:0;list-style:none;margin:26px 0 0;padding:0;max-width:560px}
.progreso__paso{flex:1;font:500 9.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:9px 2px 0;border-top:1px solid var(--line);text-align:center}
.progreso__paso.on{color:var(--gold-soft);border-top-color:var(--gold)}
.progreso__paso.done{color:rgba(255,255,255,.72);border-top-color:rgba(216,169,79,.45)}

/* ---------- el escenario y el carril ---------- */
.escenario{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start;margin:30px 0 0}
.esc__main{min-width:0}
.carril{border:1px solid var(--line);background:rgba(3,6,8,.66);backdrop-filter:blur(9px);position:sticky;top:18px}
.carril__head{display:none;width:100%;appearance:none;background:transparent;border:none;color:var(--ink);padding:14px 16px;cursor:pointer;text-align:left;gap:10px;align-items:baseline}
.carril__titulo{font:500 10px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.carril__last{font:italic 400 13.5px/1.35 var(--serif);color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.carril__body{padding:18px}
.carril .chat__hilo{max-height:52svh}
.escenario .mockstage{margin:6px 0 0}
.escenario .deck{margin-top:26px}

/* ---------- los materiales: se tocan sobre la tarjeta ---------- */
.materiales{margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.materiales[hidden]{display:none}
.mat__grupo{display:flex;gap:8px;flex-wrap:wrap}
.mat{appearance:none;background:rgba(255,255,255,.03);border:1px solid var(--line);color:rgba(255,250,238,.9);cursor:pointer;padding:10px 14px;font:500 12px/1.3 var(--sans);letter-spacing:.05em;display:inline-flex;align-items:center;gap:9px;transition:border-color .3s,background .3s}
.mat:hover{border-color:rgba(216,169,79,.55)}
.mat.on{border-color:var(--gold);background:rgba(216,169,79,.09)}
.mat__nombre{font:italic 400 15px/1.2 var(--serif);letter-spacing:0}
.mat__desc{color:rgba(255,255,255,.55);font-size:11px}
.mat__desc b{color:var(--gold-soft)}
.mat__sw{width:20px;height:20px;flex:none;border:1px solid rgba(255,255,255,.3)}
.mat__sw--mate{background:linear-gradient(135deg,#3a3a3e,#232326)}
.mat__sw--brillo{background:linear-gradient(135deg,#6a6a70,#26262a 55%,#7d7d84)}
.mat__sw--dorado{background:linear-gradient(135deg,#f0d489,#a67c2e 60%,#e6c56a)}
.mat__sw--holo{background:linear-gradient(135deg,#f6a8d8,#8fd8f2 35%,#c8f58a 65%,#b49af2)}
.mat--qr{justify-content:flex-start;text-align:left}
.mat__estado{margin-left:auto;font:500 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mat--qr.on .mat__estado{color:var(--gold-soft)}
.preciotag{margin:2px 0 0;font:500 clamp(15px,2.2vw,19px)/1.4 var(--sans);letter-spacing:.06em;color:rgba(255,250,238,.95)}
.preciotag b{color:var(--gold-soft);font-weight:600}
.preciotag .preciotag__qr{color:rgba(255,255,255,.6);font-size:.78em;letter-spacing:.1em;text-transform:uppercase}

/* el QR real dentro de la maqueta: la matriz pintada por la casa */
.qrzone canvas{display:block;width:62px;height:62px;margin:0 auto;background:#fff}
.mock--arte .qrzone canvas{width:58px;height:58px}

/* la tarjeta creada desde cero: el arte nace y la casa compone encima */
.mock--creada{overflow:hidden}
.mock--creada .arte__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mock--creada .creada__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,8,.18) 0%,rgba(4,4,8,.06) 38%,rgba(4,4,8,.55) 78%,rgba(4,4,8,.78) 100%)}
.mock--creada .creada__datos{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:7% 8%}
.mock--creada .arte__name{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.mock--creada .arte__tag{color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.mock--creada .arte__band{background:rgba(5,5,8,.72)}
.mock--creada .creada__datos--back{justify-content:center}
/* RONDA BELLEZA 1: la lista del frente de la creada lleva su ícono
   por servicio — el mismo mapa del reverso (antes era una lista
   desnuda, sin estilo propio) */
.mock--creada .arte__servs{list-style:none;margin:.55em 0 0;padding:0;display:flex;flex-direction:column;gap:.34em}
.mock--creada .arte__servs li{display:flex;align-items:center;gap:8px;font:600 11px/1.3 var(--sans);
  letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.mock--creada .arte__servs li svg{width:18px;height:18px;flex:none;stroke:#f0cd7d;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ═══ CURA DE TARJETAS · LA VARA EN EL FRENTE DE LA CREADA (2026-10-24) ═══
   El oficio en letras enormes manda arriba; la franja final lleva
   nombre y teléfono grandes; sin arte propio, el reverso del par
   se compone sobre el fondo neutro de la casa — jamás la foto del
   frente repetida */
.mock--creada .creada__datos--front{justify-content:flex-start;padding-top:6%}
/* CURA CASO ANA · C5 (2026-10-25): la jerarquía medida invertía la
   vara (oficio 31px contra nombre de 15px en la franja — el oficio
   mandaba y el nombre servía). El oficio baja a 25px y el nombre de
   la franja sube a 19px/800: la franja final — nombre y teléfono —
   es la zona que manda al cerrar la lectura, sin matar el titular */
.mock--creada .creada__oficio{margin:0;font:900 25px/1.02 var(--sans);letter-spacing:.01em;
  text-transform:uppercase;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.75)}
.mock--creada .creada__reclamo{margin-top:.45em}
.mock--creada .creada__datos--front .arte__servs{margin-top:auto;margin-bottom:.7em}
.mock--creada .creada__band{position:relative;margin-top:auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px 12px 9px}
.mock--creada .creada__bandname{font:800 19px/1.12 var(--sans);text-transform:uppercase;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7);min-width:0}
/* el teléfono de la franja ya vivía a 17px (el «12px» del diagnóstico
   era la variante --hueco del placeholder, muerta con C6): se queda
   en 17px, por encima del suelo de 15px de la cura — la vara pide el
   teléfono grande */
.mock--creada .creada__bandtel{font:800 17px/1.1 var(--sans);color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.mock--creada--sinfoto{background:linear-gradient(165deg,#17181f,#0a0a0e 70%)}
.mock--creada--sinfoto .creada__scrim{background:linear-gradient(180deg,rgba(4,4,8,.05),rgba(4,4,8,.35))}

/* la tarjeta de la baraja que crea: mismo rango que todas */
.dcard--crear .dcard__mini{background:linear-gradient(150deg,rgba(216,169,79,.16),rgba(216,169,79,.03) 55%,rgba(255,255,255,.02));border-bottom:2px solid var(--gold);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 12px}
.dcard--crear .dcard__biz{color:var(--gold-soft)}
.dcard--crear small{color:rgba(255,250,238,.75)}

/* ---------- el espejo: la prueba de imprenta ---------- */
.espejo{margin:34px 0 0;border:1px solid rgba(216,169,79,.4);background:rgba(10,8,4,.55);padding:clamp(20px,4vw,32px)}
.espejo[hidden]{display:none}
.espejo__frase{margin:10px 0 0;font:italic 400 clamp(17px,2.3vw,20px)/1.55 var(--serif);color:rgba(255,250,238,.94);max-width:56em}
.espejo__regla{margin:12px 0 0;font:500 11px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.espejo__precio{margin:10px 0 0;font:500 clamp(20px,3vw,26px)/1.3 var(--sans);color:rgba(255,250,238,.97)}
.espejo__precio b{color:var(--gold-soft)}
.espejo__acciones{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0;align-items:center}
.btnquiet{appearance:none;background:transparent;border:1px solid var(--line);color:rgba(255,255,255,.8);font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:14px 18px;cursor:pointer}
.btnquiet:hover{border-color:var(--gold);color:var(--gold-soft)}
.sello{margin:24px 0 0;border-top:1px solid var(--line);padding:20px 0 0}
.sello[hidden]{display:none}
.sello__tit{margin:0;font:italic 400 19px/1.35 var(--serif);color:var(--gold-soft)}
.sello__linea{margin:8px 0 0;font:500 12.5px/1.5 var(--sans);letter-spacing:.08em;color:rgba(255,250,238,.92)}
.sello__hash{margin:4px 0 0;font:400 11px/1.6 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.5);word-break:break-all}
.sello__nota{margin:10px 0 0;font:italic 400 14.5px/1.55 var(--serif);color:rgba(255,255,255,.66);max-width:58em}
.sello__descargas{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.sello--caido{opacity:.62}
.sello--caido .sello__tit{color:rgba(255,255,255,.6)}
.logistica{margin:26px 0 0;border-top:1px solid var(--line);padding:20px 0 0}
.logistica .f{margin:0 0 14px}
.logistica .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.logistica label{display:block;font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 7px}
.logistica .f__opt{text-transform:none;letter-spacing:.02em;color:rgba(255,255,255,.4)}
.logistica input,.logistica textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);font:400 15px/1.4 var(--sans);padding:12px 14px}
.logistica textarea{min-height:64px;resize:vertical}
.logistica input:focus,.logistica textarea:focus{outline:none;border-color:var(--gold)}

/* ---------- tus pedidos ---------- */
.orders{position:relative;z-index:3;padding:4svh max(23px,calc(50% - 640px)) 4svh}
.ordersbox{width:min(560px,100%);margin:0 auto;border:1px solid var(--line);background:rgba(3,6,8,.66);backdrop-filter:blur(9px);padding:clamp(20px,4vw,32px)}
.orders__intro{margin:0 0 18px;font:italic 400 15.5px/1.5 var(--serif);color:rgba(255,255,255,.7)}
.orders__list{list-style:none;margin:0;padding:0}
.orders__item{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--line)}
.orders__folio{font:500 10px/1.5 var(--sans);letter-spacing:.2em;color:var(--gold-soft);text-transform:uppercase}
.orders__what{flex:1;min-width:180px;font:italic 400 16px/1.4 var(--serif);color:rgba(255,250,238,.92)}
.orders__when{display:block;font:400 12.5px/1.5 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.45)}
.orders__estado{display:block;font:400 12.5px/1.5 var(--sans);color:rgba(255,255,255,.55)}
.orders__copy{appearance:none;background:transparent;border:1px solid var(--line);color:var(--ink);font:500 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:9px 13px;cursor:pointer;transition:border-color .3s,color .3s}
.orders__copy:hover{border-color:var(--gold);color:var(--gold-soft)}
.orders__acciones{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- los demás productos, con su imagen ---------- */
.productos{position:relative;z-index:3;padding:6svh max(23px,calc(50% - 640px)) 2svh}
.productos .catalog__head{max-width:640px}
.prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.prodcard{appearance:none;text-align:left;background:rgba(3,6,8,.6);border:1px solid var(--line);padding:0;cursor:pointer;color:var(--ink);transition:border-color .4s,background .4s;display:flex;flex-direction:column;overflow:hidden}
.prodcard:hover{border-color:rgba(216,169,79,.55)}
.prodcard.on{border-color:var(--gold);background:rgba(216,169,79,.06)}
.prodcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.prodcard__body{padding:13px 15px 14px;display:flex;flex-direction:column;gap:4px}
.prodcard__name{font:italic 400 17px/1.25 var(--serif);color:rgba(255,250,238,.95)}
.prodcard__en{font:500 8.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.prodcard__tag{margin-top:4px;font:italic 400 13px/1.35 var(--serif);color:var(--gold-soft)}
/* APERTURA HONESTA: el rótulo de estado, generado del dato único —
   la máquina lleva la brasa de la venta; la cotización viva, el
   dorado de la conversación */
.prodcard__chip{align-self:flex-start;margin-top:6px;font:600 9px/1 var(--sans);letter-spacing:.22em;padding:5px 8px 4px;border:1px solid var(--line);color:rgba(255,255,255,.66)}
.prodcard__chip--maquina{border-color:var(--brasa);color:var(--brasa)}
.prodcard__chip--cotizacion{border-color:rgba(216,169,79,.55);color:var(--gold-soft)}
/* la línea de estado en el escenario, repetida al abrir el servicio */
.esc__estado{display:flex;gap:10px;align-items:flex-start;margin:14px auto 0;max-width:520px;font:400 13.5px/1.5 var(--sans);color:rgba(255,250,238,.78);text-align:left}
.esc__chip{flex:none;font:600 9px/1 var(--sans);letter-spacing:.22em;padding:5px 8px 4px;border:1px solid var(--line);color:rgba(255,255,255,.66);margin-top:2px}
.esc__chip--maquina{border-color:var(--brasa);color:var(--brasa)}
.esc__chip--cotizacion{border-color:rgba(216,169,79,.55);color:var(--gold-soft)}
/* el escenario compuesto de la cotización viva y el estado sin datos */
.mock--compuesto,.mock--estado{width:min(340px,88vw);aspect-ratio:4/3;text-align:left}
.mock__chip{align-self:flex-start;font:600 9px/1 var(--sans);letter-spacing:.22em;padding:5px 8px 4px;border:1px solid rgba(216,169,79,.55);color:var(--gold-soft);margin-bottom:1em}
.mock__cot-lab{margin:0 0 .6em;font:600 9.5px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--m-accent)}
.mock__name--cot{font-size:23px}
.mock__cot-precio{margin:.7em 0 0;font:600 30px/1.1 var(--sans);color:var(--m-ink)}
.mock__cot-nota{margin:.8em 0 0;font-size:11.5px;line-height:1.45;color:var(--m-soft)}
.mock__line--soft{color:var(--m-soft)}

/* ---------- la puerta del revendedor ---------- */
.puerta-revendedor{margin:26px 0 0}
.puerta-revendedor a{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px}
.puerta-revendedor a:hover{color:var(--gold-soft);border-color:var(--gold)}

/* ---------- el escenario 3D (Three.js) sobre la misma tarjeta ---------- */
.stage3d-wrap{position:relative}
.stage3d-canvas{display:block;width:100%;aspect-ratio:7/4;touch-action:pan-y}
.stage3d-canvas canvas{display:block;width:100%!important;height:100%!important}

/* ---------- móvil: la acompañante nace recogida ---------- */
@media(max-width:900px){
  .escenario{grid-template-columns:1fr}
  .carril{position:static;order:2}
  .carril__head{display:flex}
  .carril--cerrado .carril__body{display:none}
  .entrada{padding-top:6svh}
  .logistica .f-grid{grid-template-columns:1fr}
}
/* ---------- el compositor: la biblioteca ---------- */
.chip .sw{display:inline-flex;gap:4px;margin-right:9px;vertical-align:-2px}
.chip .sw i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:inline-block}
.priceline{margin:9px 0 0;font:italic 400 15px/1.4 var(--serif);color:var(--gold-soft)}
.delivery-head{margin-top:34px}
.formnote{margin:14px 0 0;padding:12px 14px;border:1px solid rgba(216,169,79,.5);font:italic 400 15px/1.45 var(--serif);color:var(--gold-soft)}
.approve{display:flex;gap:12px;align-items:flex-start;margin:20px 0 4px;padding:16px;border:1px solid var(--line);cursor:pointer}
.approve input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gold);flex:none;cursor:pointer}
.approve span{font:italic 400 15px/1.5 var(--serif);color:rgba(255,255,255,.82)}
.approve span b{color:var(--gold-soft);font-weight:400}
.approve .en{display:block;margin-top:6px;font-size:.78em;color:rgba(255,255,255,.45)}

/* ---------- la vista previa: maquetas vivas ---------- */
.preview{margin:28px 0 6px;padding-top:24px;border-top:1px solid var(--line)}
.preview__cap{margin:0 0 16px;font:500 9px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.preview__cap span{color:rgba(255,255,255,.35);letter-spacing:.14em}
.preview__note{margin:14px 0 0;font:italic 400 14px/1.5 var(--serif);color:rgba(255,255,255,.5);text-align:center}
.mockstage{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:flex-start}
.mockwrap{display:flex;flex-direction:column;gap:8px;align-items:center}
.mockwrap__cap{font:500 8.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.mock{--m-bg:#0b0b0d;--m-ink:#f3efe7;--m-accent:#D8A94F;--m-soft:rgba(243,239,231,.62);
  background:var(--m-bg);color:var(--m-ink);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden;position:relative;
  display:flex;flex-direction:column;justify-content:center;padding:7% 8%;
  transition:background .5s,color .5s}
.mock__name{margin:0;font-size:19px;line-height:1.12}
.mock__tag{margin:.45em 0 0;font-size:12.5px;line-height:1.35;color:var(--m-soft)}
.mock__rule{width:38px;height:2px;background:var(--m-accent);margin:.8em 0}
.mock__contact{margin-top:auto;padding-top:.9em;font-size:11.5px;line-height:1.5;color:var(--m-soft)}
.mock__contact b{color:var(--m-ink);font-weight:600}
.mock__mono{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--m-accent);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--m-accent)}
.mock--card{width:min(320px,86vw);aspect-ratio:7/4}
.mock--flyer{width:min(240px,70vw);aspect-ratio:3/4}
.mock--postal{width:min(320px,86vw);aspect-ratio:3/2}
.mock--banner{width:min(430px,92vw);aspect-ratio:3/1}
.mock--sticker{width:190px;height:190px;border-radius:50%;align-items:center;text-align:center;justify-content:center;padding:12%}
.mock--sticker.sq{border-radius:16px}
.mock--generic{width:min(320px,86vw);aspect-ratio:4/3}
/* el QR del reverso: patrón decorativo, jamás un código real */
.qrph{width:58px;height:58px;flex:none;background:
  conic-gradient(var(--m-ink) 25%,transparent 0 50%,var(--m-ink) 0 75%,transparent 0);
  background-size:13px 13px;border:5px solid var(--m-bg);outline:1.5px solid var(--m-ink);opacity:.9}
.qrph__cap{font:500 8px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--m-soft);text-align:center}
.mock--back{align-items:center;text-align:center;justify-content:center;gap:.55em}
.mock--back .mock__name{font-size:15px}

/* los ocho estilos de la biblioteca: tipografía y gesto */
.mock[data-style="nocturna"]{text-align:center;align-items:center;font-family:Georgia,'Times New Roman',serif}
.mock[data-style="nocturna"] .mock__name{font-weight:400;letter-spacing:.01em}
.mock[data-style="nocturna"] .mock__rule{margin-left:auto;margin-right:auto}
.mock[data-style="nocturna"] .mock__contact{text-align:center}
.mock[data-style="tinta"]{font-family:Georgia,'Times New Roman',serif;text-align:left}
.mock[data-style="tinta"] .mock__name{font-weight:700}
.mock[data-style="brasa"]{font-family:Georgia,'Times New Roman',serif}
.mock[data-style="brasa"] .mock__name{font-style:italic;font-weight:400}
.mock[data-style="brasa"] .mock__tag{font-style:italic}
.mock[data-style="clinica"]{font-family:ui-sans-serif,-apple-system,'Segoe UI',sans-serif}
.mock[data-style="clinica"] .mock__name{font-weight:600;letter-spacing:-.01em}
.mock[data-style="clinica"] .mock__rule{height:3px;border-radius:2px}
.mock[data-style="taller"]{font-family:ui-sans-serif,-apple-system,'Segoe UI',sans-serif;text-transform:uppercase}
.mock[data-style="taller"] .mock__name{font-weight:800;letter-spacing:.02em;font-size:21px}
.mock[data-style="taller"] .mock__tag{text-transform:none;font-style:italic}
.mock[data-style="taller"] .mock__contact{border-top:2px solid var(--m-accent);width:100%}
.mock[data-style="neon"]{font-family:ui-monospace,'SF Mono',Menlo,monospace;border:1px solid var(--m-accent)}
.mock[data-style="neon"] .mock__name{font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:16px}
.mock[data-style="neon"] .mock__rule{width:100%;height:1px}
.mock[data-style="clasica"]{font-family:Georgia,'Times New Roman',serif;text-align:center;align-items:center;box-shadow:inset 0 0 0 5px var(--m-bg),inset 0 0 0 6.5px var(--m-accent),0 18px 44px rgba(0,0,0,.55)}
.mock[data-style="clasica"] .mock__name{font-variant:small-caps;letter-spacing:.06em}
.mock[data-style="clasica"] .mock__rule{margin-left:auto;margin-right:auto;width:26px;height:1px}
.mock[data-style="clasica"] .mock__contact{text-align:center}
.mock[data-style="minima"]{font-family:ui-sans-serif,-apple-system,'Segoe UI',sans-serif;justify-content:flex-end}
.mock[data-style="minima"] .mock__name{font-size:14px;font-weight:500;letter-spacing:.04em}
.mock[data-style="minima"] .mock__tag{font-size:11px}
.mock[data-style="minima"] .mock__rule{display:none}
.mock[data-style="impacto"]{font-family:ui-sans-serif,-apple-system,'Segoe UI',sans-serif}
.mock[data-style="impacto"] .mock__name{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.005em;font-size:22px;line-height:1.04}
.mock[data-style="impacto"] .mock__tag{font-style:italic;font-size:13px}
.mock[data-style="impacto"] .mock__rule{width:64px;height:4px;transform:skewX(-18deg)}
.mock[data-style="impacto"] .mock__contact{border-top:2px solid var(--m-accent);width:100%}
.mock[data-style="fresco"]{font-family:ui-sans-serif,-apple-system,'Segoe UI',sans-serif}
.mock[data-style="fresco"] .mock__name{font-weight:700;letter-spacing:-.005em;font-size:20px}
.mock[data-style="fresco"] .mock__rule{width:54px;height:3px;border-radius:2px}
.mock[data-style="fresco"] .mock__contact{font-size:12px}
.mock--back[data-style]{text-align:center;align-items:center}

/* ---------- la salida del pedido ---------- */
.out__total{margin:16px 0 0;font:italic 400 clamp(19px,2.4vw,23px)/1.35 var(--serif);color:var(--gold-soft)}
.paydoor{margin-top:20px}
/* el botón de WhatsApp de la casa: texto propio, sin marcas ajenas;
   solo existe cuando la casa encendió su número */
.wabtn{display:inline-block;background:rgba(216,169,79,.1);border:1px solid var(--gold);color:var(--gold-soft);font:italic 400 16.5px/1.25 var(--serif);padding:12px 22px;text-decoration:none;transition:background .3s,border-color .3s}
.wabtn:hover{background:rgba(216,169,79,.2)}
/* LA PUERTA DE TARJETA (Forma de Canales): vive junto al botón de
   WhatsApp, jamás en su lugar; la brasa pegada a su precio, como
   manda el Sistema Visual dentro de las casas */
.out__puerta{display:inline-block}
.puerta-tarjeta{display:inline-block;background:rgba(232,147,79,.08);border:1px solid var(--brasa);color:var(--brasa);font:600 15px/1.25 var(--sans);padding:12px 22px;text-decoration:none;transition:background .3s}
.puerta-tarjeta:hover{background:rgba(232,147,79,.18)}

/* ============ NIVEL BRUTAL: baraja, volteo, luz y QR propuesto ============ */
.f__hint{margin:9px 0 0;font:italic 400 13.5px/1.45 var(--serif);color:rgba(255,255,255,.48)}

/* ---------- 1 · la baraja que se desliza ---------- */
.deck{margin:0 0 20px}
.deck__cap{margin:0 0 12px;font:500 9px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.deck__cap span{color:rgba(255,255,255,.35);letter-spacing:.1em}
.deck__viewport{overflow:hidden;cursor:grab;border:1px solid var(--line);background:rgba(255,255,255,.02);padding:14px 4px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.deck__viewport:active{cursor:grabbing}
.deck__viewport:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.deck__track{display:flex;gap:12px;width:max-content;padding:0 10px;will-change:transform}
.no-gsap .deck__viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.dcard{appearance:none;flex:none;width:148px;padding:0;border:1px solid rgba(255,255,255,.16);background:transparent;cursor:pointer;text-align:left;color:var(--ink)}
.dcard__mini{height:84px;padding:10px 11px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative}
.dcard__mini b{font-size:12.5px;line-height:1.2;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__mini small{font-size:9.5px;opacity:.65;display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__name{display:block;padding:8px 10px;font:500 8.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.12);background:rgba(3,6,8,.7)}
.dcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 12px 26px rgba(0,0,0,.5)}
.dcard.on .dcard__name{color:var(--gold-soft)}
.deck__hint{margin:10px 0 0;font:italic 400 13.5px/1.45 var(--serif);color:rgba(255,255,255,.45);text-align:center}

/* la mini de la baraja respira con la tipografía de su estilo */
.dcard__mini[data-style-mini="nocturna"] b,.dcard__mini[data-style-mini="tinta"] b,
.dcard__mini[data-style-mini="brasa"] b,.dcard__mini[data-style-mini="clasica"] b{font-family:Georgia,'Times New Roman',serif}
.dcard__mini[data-style-mini="brasa"] b{font-style:italic;font-weight:400}
.dcard__mini[data-style-mini="tinta"] b{font-weight:700}
.dcard__mini[data-style-mini="clasica"] b{font-variant:small-caps;letter-spacing:.04em;font-weight:400}
.dcard__mini[data-style-mini="nocturna"]{text-align:center}
.dcard__mini[data-style-mini="nocturna"] b{font-weight:400}
.dcard__mini[data-style-mini="clinica"] b,.dcard__mini[data-style-mini="fresco"] b{font-weight:700}
.dcard__mini[data-style-mini="taller"] b{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.dcard__mini[data-style-mini="impacto"] b{font-weight:900;font-style:italic;text-transform:uppercase}
.dcard__mini[data-style-mini="neon"] b{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.dcard__mini[data-style-mini="minima"] b{font-weight:500;letter-spacing:.03em}
/* las tarjetas de oficio: ícono del oficio y la frase de la muestra */
.dcard--pl{width:158px}
.dcard--pl .dcard__mini{height:92px;padding-right:26px;justify-content:center}
.dcard--pl .dcard__mini small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.dcard__ic{position:absolute;top:8px;right:8px;width:15px;height:15px;opacity:.9}
.dcard__ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* el índice discreto por oficio */
.deckfilter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dfilter{appearance:none;background:transparent;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.55);
  font:500 8.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;cursor:pointer;
  transition:border-color .3s,color .3s}
.dfilter:hover{border-color:rgba(216,169,79,.55);color:var(--gold-soft)}
.dfilter.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(216,169,79,.07)}

/* ---------- 2+3 · el escenario: volteo real y luz que responde ---------- */
.stagebar{margin:14px 0 0;text-align:center}
.flipbtn{appearance:none;background:rgba(216,169,79,.08);border:1px solid var(--gold);color:var(--gold-soft);font:italic 400 15.5px/1.2 var(--serif);padding:11px 20px;cursor:pointer}
.flipbtn:hover{background:rgba(216,169,79,.18)}
.stagebar__hint{margin:9px 0 0;font:italic 400 13.5px/1.45 var(--serif);color:rgba(255,255,255,.45)}
.stage3d{perspective:1100px;width:min(340px,88vw);margin:0 auto}
.tilt{transform-style:preserve-3d;will-change:transform;perspective:1100px;
/* EL GIRO VIVE AQUÍ (corrección 2026-10-18): el JS del escenario escribe
   --rx/--ry (la inclinación del dedo y el +180 del reverso) y esta es la
   regla que los consume. Sin ella el volteo de las Estampas no giraba y
   las dos caras quedaban apiladas en el flujo. Movimiento gobernado:
   la duración y la curva del acta, las mismas del volteo. */
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--dur-escenario,.36s) var(--curva-respuesta,cubic-bezier(.2,.7,.25,1))}
.flip{position:relative;transform-style:preserve-3d;width:100%;aspect-ratio:7/4}
.flip.is-back-css{transform:rotateY(180deg);transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face--back{transform:rotateY(180deg)}
.face .mock{width:100%;height:100%}
/* LAS DOS CARAS DE LA TARJETA (corrección 2026-10-18): frente y reverso
   se componen como caras de un mismo objeto — absolutas sobre el flip,
   con la cara oculta al girar, y el REVERSO pre-girado 180° sobre Y:
   cuando la inclinación completa su +180, el reverso suma 360° y se
   lee DERECHO — ni de cabeza ni en espejo. */
.flip__in{position:absolute;inset:0;transform-style:preserve-3d}
.flip__in>.mock{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip__in>.mock:last-child{transform:rotateY(180deg)}
.stage3d{touch-action:pan-y;cursor:grab}
.stage3d:active{cursor:grabbing}
/* el brillo que sigue el dedo/cursor: --mx/--my los escribe el JS */
.glare{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
  background:radial-gradient(420px circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),rgba(255,255,255,.34),rgba(255,255,255,.06) 42%,transparent 68%)}
.stage3d:hover .glare,.stage3d.is-touching .glare{opacity:1}
.mock[data-finish="mate"] .glare{background:radial-gradient(460px circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),rgba(255,255,255,.13),transparent 62%)}
.mock[data-finish="brillo"] .glare{background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) calc(var(--mx,.5)*70% + 18%),transparent 68%),radial-gradient(380px circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),rgba(255,255,255,.28),transparent 60%)}
.mock[data-finish="dorado"] .glare{background:radial-gradient(420px circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),rgba(255,205,105,.5),rgba(216,169,79,.12) 45%,transparent 70%)}
.mock[data-finish="holografico"] .glare{background:conic-gradient(from calc(var(--mx,.5)*260deg) at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),rgba(255,120,200,.34),rgba(120,220,255,.34),rgba(190,255,140,.3),rgba(255,220,120,.34),rgba(255,120,200,.34));mix-blend-mode:screen}
/* la marca PRUEBA: la vista previa nunca se confunde con la pieza final */
.prueba{position:absolute;top:10px;right:10px;z-index:5;pointer-events:none;font:700 8.5px/1 var(--sans);letter-spacing:.24em;color:var(--m-accent);border:1.2px solid var(--m-accent);padding:5px 7px 4px;opacity:.85;transform:rotate(4deg);background:rgba(0,0,0,.14)}

/* ---------- 4 · el reverso compuesto: servicios como íconos ---------- */
.mock--back2{align-items:stretch;text-align:left;justify-content:flex-start;gap:.5em;padding:6% 7%}
.mock--back2 .back__head{display:flex;align-items:center;gap:10px}
.mock--back2 .mock__mono{width:38px;height:38px;font-size:14px;flex:none}
.mock--back2 .mock__name{font-size:14.5px}
.mock--back2 .mock__tag{margin:0;font-size:11px}
.svc{list-style:none;margin:.35em 0 0;padding:0;display:flex;flex-direction:column;gap:.42em}
.svc li{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.3;color:var(--m-soft)}
.svc li b{color:var(--m-ink);font-weight:600}
.svc svg{width:18px;height:18px;flex:none;stroke:var(--m-accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc__empty{margin:.3em 0 0;font-size:11px;font-style:italic;color:var(--m-soft)}
.back__row{display:flex;gap:12px;align-items:center;margin-top:auto;width:100%}
.back__row .svc{flex:1;margin-top:0}
/* la zona del QR: solo existe si el visitante aceptó la propuesta */
.qrzone{flex:none;width:74px;text-align:center}
.qrzone .qrph{width:62px;height:62px;margin:0 auto}
.qrzone__cap{margin:5px 0 0;font:500 7.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-soft)}
.qrzone--preview{opacity:.55}
.qrzone--preview .qrph{outline-style:dashed}

/* ---------- 5 · el QR, propuesto aparte ---------- */
.qrprop{margin:18px 0 0;border:1px solid rgba(216,169,79,.5);background:rgba(216,169,79,.05);padding:16px 18px;text-align:left}
.qrprop__line{margin:0;font:italic 400 16.5px/1.4 var(--serif);color:rgba(255,250,238,.94)}
.qrprop__line b{color:var(--gold-soft);font-weight:400}
.qrprop__look{appearance:none;background:transparent;border:0;border-bottom:1px solid var(--gold);color:var(--gold-soft);font:italic 400 16.5px/1.2 var(--serif);padding:0 1px;cursor:pointer}
.qrprop__copy{margin:9px 0 0;font:italic 400 14px/1.5 var(--serif);color:rgba(255,255,255,.62)}
.qrprop__check{display:flex;gap:11px;align-items:flex-start;margin:13px 0 0;cursor:pointer}
.qrprop__check input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--gold);flex:none;cursor:pointer}
.qrprop__check span{font:italic 400 15px/1.45 var(--serif);color:rgba(255,255,255,.86)}
.qrprop__state{margin:11px 0 0;font:500 9.5px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}

/* ============ INSIGNIA · ARTE DE LA CASA ============
   La piel es una foto/arte original de la casa; las zonas vivas se
   componen encima: nombre en letra display con volumen (degradado
   cromo/tinte + sombra dura), frase en capitales espaciadas, servicios
   a la derecha sobre velo, banda del teléfono abajo, y en el reverso
   el lema, los sellos dorados de confianza y la zona del QR. */
.mock--arte{display:block;padding:0;background:#060607;color:#fff}
.arte__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mock--arte .prueba{z-index:6;color:#ffe9c4;border-color:rgba(255,233,196,.85);background:rgba(0,0,0,.34)}
.arte__top{position:absolute;z-index:2;top:6.5%;left:6%;right:26%}
.arte__name{margin:0;font-family:var(--sans);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:23px;line-height:1.03;letter-spacing:.004em;
  background:linear-gradient(178deg,#ffffff 8%,#fdf3d8 34%,var(--arte-tinte) 58%,#fff3cf 82%,#ffffff 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.65)) drop-shadow(0 5px 12px rgba(0,0,0,.5))}
.arte__tag{margin:.5em 0 0;font:700 8.5px/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.75)}
/* respiro de la columna: su última línea queda claramente por encima
   del borde superior de la banda del teléfono */
.arte__srv{position:absolute;z-index:2;right:0;top:30%;max-width:47%;list-style:none;margin:0;
  padding:6px 6% 5px 26px;text-align:right;
  background:linear-gradient(90deg,transparent,rgba(2,2,4,.52) 34%,rgba(2,2,4,.66))}
.arte__srv li{font:800 10.5px/1.22 var(--sans);text-transform:uppercase;letter-spacing:.045em;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.95);margin:.22em 0}
/* RONDA BELLEZA 1: el rombo cede su sitio al ícono del servicio — el
   mismo mapa del reverso, elegido por lo que el servicio es */
.arte__srv li{display:flex;align-items:center;justify-content:flex-end;gap:.55em}
.arte__srv li svg{width:18px;height:18px;flex:none;stroke:var(--arte-tinte);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}
.arte__band{position:absolute;z-index:2;left:0;right:0;bottom:0;color:#171106;
  background:linear-gradient(180deg,var(--arte-banda),var(--arte-banda));
  clip-path:polygon(0 26%,100% 0,100% 100%,0 100%);padding:13px 6% 7px}
.arte__band b{display:block;font:900 18.5px/1.05 var(--sans);letter-spacing:.015em}
.arte__band small{display:block;margin-top:2px;font:700 7px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.72}
.arte__lema{position:absolute;z-index:2;top:7%;left:6%;right:6%;margin:0;
  font-family:var(--sans);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:19.5px;line-height:1.05;letter-spacing:.01em;
  background:linear-gradient(178deg,#ffffff 8%,#fdf3d8 34%,var(--arte-tinte) 58%,#fff3cf 82%,#ffffff 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.65)) drop-shadow(0 5px 12px rgba(0,0,0,.5))}
.arte__sellos{position:absolute;z-index:2;top:29%;left:6%;display:flex;gap:13px}
.arte__sello{display:flex;flex-direction:column;align-items:center;gap:3px;width:54px;text-align:center}
.arte__sello svg{width:27px;height:27px;stroke:#f0cd7d;fill:rgba(216,169,79,.16);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75))}
.arte__sello small{font:700 6.6px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#ffeec2;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 1px 8px rgba(0,0,0,.8)}
.arte__backrow{position:absolute;z-index:2;left:6%;right:6%;bottom:11.5%;display:flex;gap:10px;align-items:flex-end}
.arte__backsvc{flex:1;min-width:0;background:rgba(3,3,5,.58);border:1px solid rgba(255,255,255,.13);
  border-radius:9px;padding:7px 10px;backdrop-filter:blur(3px)}
.arte__backsvc .svc{margin-top:0}
.arte__backname{position:absolute;z-index:2;bottom:4.2%;left:6%;right:6%;margin:0;
  font:800 8.5px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.95)}
.mock--arte .qrzone__cap{color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.9)}
/* ═══ RONDA BELLEZA 1 · EL TÍTULO SE ACOMODA ═══
   la clase nace del largo del nombre (en el motor): un nombre de
   tres palabras o más no se parte feo — la composición lo
   equilibra y le baja el cuerpo antes de pintarlo */
.nombre--fit1 .arte__name{font-size:20px;line-height:1.07;text-wrap:balance}
.nombre--fit2 .arte__name{font-size:17.5px;line-height:1.1;text-wrap:balance}
.nombre--fit1 .mock__name,.nombre--fit2 .mock__name{text-wrap:balance}
/* ═══ CURA 14 · EL REVERSO PARTE EL TÍTULO COMO EL FRENTE ═══
   partirNombre (en el motor) entrega el nombre largo del
   reverso en dos nodos de línea con el mismo equilibrio del
   frente: aquí solo se apilan. En el reverso de arte, la fila
   de servicios sube lo justo para que las dos líneas del
   nombre respiren sin pisarla */
.nlin{display:block}
.mock--arteback.nombre--fit1 .arte__backrow{bottom:15%}
.mock--arteback.nombre--fit2 .arte__backrow{bottom:16.5%}
/* ═══ RONDA BELLEZA 1 · LA RAZÓN DEL BLOQUEO, EN LA PRUEBA ═══ */
.espejo__bloqueo{margin:14px 0 0;padding:10px 14px;border-left:3px solid var(--gold);
  font:500 14px/1.55 var(--sans);color:rgba(255,240,214,.96);background:rgba(216,169,79,.08)}
.espejo__bloqueo[hidden]{display:none}
/* la mini de la baraja con arte: la foto manda, el nombre encima */
.dcard__mini--arte{padding:0;background:#060607}
.dcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dcard__mini--arte .dcard__biz{position:absolute;left:9px;right:9px;bottom:7px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.8)}
.dcard__arte{position:absolute;top:6px;left:6px;z-index:2;background:rgba(4,4,6,.74);
  border:1px solid rgba(240,205,125,.55);color:#f3d79f;border-radius:99px;padding:3px 7px;
  font:800 7px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* ---------- móvil ---------- */
@media(max-width:760px){
  .orders{padding-left:23px;padding-right:23px}
  .ordersbox{padding:20px 18px}
  .catalog{padding-left:23px;padding-right:23px}
  .catgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .mock--banner{aspect-ratio:2.4/1}
  .approve{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .mock{transition:none}
  .pcard{transition:none}
  .wabtn{transition:none}
  .flip.is-back-css{transition:none}
  .tilt{transition:none}
  .glare{display:none}
}

/* ---------- las variantes del arte ---------- */
.artevars{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.artevars[hidden]{display:none}
.artevars__lab{font:500 10px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.avchip{appearance:none;display:inline-flex;align-items:center;gap:7px;background:rgba(3,6,8,.6);border:1px solid var(--line);color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.08em;padding:8px 12px;border-radius:99px;cursor:pointer;transition:border-color .3s}
.avchip i{width:12px;height:12px;border-radius:50%;display:inline-block}
.avchip:hover{border-color:rgba(216,169,79,.55)}
.avchip.on{border-color:var(--gold);background:rgba(216,169,79,.1)}

/* ---------- el cierre: pago y estado del pedido ---------- */
.out__pago{margin:14px 0 0;font:italic 400 15.5px/1.55 var(--serif);color:rgba(255,255,255,.85)}
.out__pago b{color:var(--gold-soft)}
.orders__estado{display:block;width:100%;font:500 10px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}

/* ---------- la puerta del formulario ---------- */
.formdoor{width:min(560px,100%);margin:0 auto;padding:0 0 4svh}
.formdoor__copy{margin:0 0 16px;max-width:620px;font:italic 400 15.5px/1.5 var(--serif);color:rgba(255,255,255,.7)}
.btndoor{appearance:none;background:transparent;border:1px solid var(--gold);color:var(--gold-soft);font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:14px 20px;cursor:pointer;transition:background .3s,color .3s}
.btndoor:hover{background:rgba(216,169,79,.1)}
#formDoor[hidden]{display:none}

/* ---------- el chat de la casa ---------- */
.chatsec{position:relative;z-index:3;padding:4svh max(23px,calc(50% - 590px)) 6svh}
.chatbox{width:min(680px,100%);margin:0 auto;border:1px solid var(--line);background:rgba(3,6,8,.66);backdrop-filter:blur(9px);padding:clamp(20px,4vw,32px)}
.chatbox__intro{margin:0 0 18px;font:italic 400 15.5px/1.5 var(--serif);color:rgba(255,255,255,.7)}
.chatbox__intro .en{display:block;margin-top:8px;font-size:.72em;line-height:1.45;color:rgba(255,255,255,.45)}
.chat__hilo{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding:4px 2px 8px;scrollbar-width:thin}
.chatmsg{max-width:88%;padding:12px 15px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.chatmsg p{margin:0;font:400 15.5px/1.55 var(--serif);color:rgba(255,250,238,.92)}
.chatmsg p+p{margin-top:8px}
.chatmsg b{color:var(--gold-soft)}
.chatmsg--casa{align-self:flex-start;border-left:2px solid var(--gold)}
.chatmsg--yo{align-self:flex-end;background:rgba(216,169,79,.09);border-color:rgba(216,169,79,.35)}
.chatmsg--yo p{font-family:var(--sans);font-size:14.5px}
.chatmsg--card{align-self:stretch;max-width:100%;background:transparent;border:none;padding:2px 0}
.chatcard{max-width:360px}
.chatcard .mock{width:100%}
.chatcard__tools{margin:8px 0 0}
.chat__mini{appearance:none;background:transparent;border:1px solid var(--line);color:rgba(255,255,255,.75);font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;cursor:pointer}
.chat__mini:hover{border-color:var(--gold);color:var(--gold-soft)}
.chatstrip{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 6px;scrollbar-width:thin}
.chatstrip__item{appearance:none;flex:0 0 auto;width:148px;background:rgba(3,6,8,.6);border:1px solid var(--line);padding:0;cursor:pointer;text-align:left;transition:border-color .3s}
.chatstrip__item:hover{border-color:var(--gold)}
.chatstrip__item img{display:block;width:100%;aspect-ratio:7/4;object-fit:cover}
.chatstrip__item span{display:block;padding:8px 9px;font:500 10px/1.35 var(--sans);letter-spacing:.06em;color:rgba(255,255,255,.8)}
.chat__chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chat__chip{appearance:none;background:rgba(216,169,79,.07);border:1px solid rgba(216,169,79,.5);color:var(--gold-soft);font:500 12.5px/1 var(--sans);letter-spacing:.04em;padding:11px 15px;border-radius:99px;cursor:pointer;transition:background .3s,border-color .3s}
.chat__chip:hover{background:rgba(216,169,79,.16);border-color:var(--gold)}
.chat__puerta{display:block;width:100%;min-height:48px;margin:12px 0 0;appearance:none;background:rgba(216,169,79,.13);border:1px solid var(--gold);color:var(--gold-soft);font:600 13.5px/1.2 var(--sans);letter-spacing:.05em;padding:14px 16px;border-radius:10px;cursor:pointer;transition:background .3s}
.chat__puerta:hover{background:rgba(216,169,79,.22)}
.chat__puerta[hidden]{display:none}
.chat__bar{display:flex;gap:9px;margin:14px 0 0}
.chat__bar input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);font:400 15px/1.4 var(--sans);padding:12px 14px}
.chat__bar input:focus{outline:none;border-color:var(--gold)}
.chat__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btnchat{appearance:none;background:var(--gold);border:1px solid var(--gold);color:#14100a;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;cursor:pointer}
.chat__door{margin:14px 0 0;font:italic 400 14px/1.5 var(--serif);color:rgba(255,255,255,.55)}
.chat__doorlink{appearance:none;background:none;border:none;padding:0;font:inherit;color:var(--gold-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.chat__wa{display:inline-block;margin-top:2px}
@media(max-width:760px){
  .chatsec{padding-left:23px;padding-right:23px}
  .chatmsg{max-width:94%}
  .chatcard{max-width:100%}
  .chat__hilo{max-height:60svh}
}

/* ════════════════════════════════════════════════════════════════════
   EL VESTIDO — Sistema Visual (acta de la Mesa del Diseño, en vigor)
   La sala consume la hoja de tokens única (/assets/tokens.css):
   piedra única, territorio brasa adentro, dorado solo en la voz,
   el precio como DATO y Fraunces gobernada. Los nombres legados de
   plaza.css se remapean a la hoja: ningún hex nuevo vive aquí.
   ════════════════════════════════════════════════════════════════════ */
body.world--print{
  --gold:var(--dorado-accion); --gold-soft:var(--dorado-luz);
  --line:var(--borde); --ink:var(--texto); --void:var(--piedra);
  background:var(--piedra); color:var(--texto);
}
/* la cabecera mínima: la misma en toda pantalla */
.cabecera{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px max(23px,calc(50% - 640px)) 0}
.cabecera a{text-decoration:none;font:500 15px/1.3 var(--sans);color:var(--dorado-luz);min-height:48px;display:inline-flex;align-items:center}
.cabecera__pedido{color:var(--dorado-accion)!important}
/* el signo de la casa: la huella — la hoja y la línea que acaba de caer */
.signo{width:30px;height:30px;vertical-align:-8px;margin-right:10px;color:var(--brasa)}
.signo rect,.signo path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
/* Fraunces gobernada: WONK 0, jamás bajo 20px en la interfaz */
.entrada h1{font-variation-settings:"WONK" 0}
.world--print .serif-display{font-variation-settings:"WONK" 0}
/* la voz de la casa es sans: el cuerpo y la conversación son operables */
.chatmsg p{font:400 17px/1.55 var(--sans);color:var(--texto)}
.chatmsg--yo p{font-size:16px}
.orders__intro,.catalog__intro,.orders__what,.espejo__frase{font-family:var(--sans)}
.orders__what{font-size:16px;color:var(--texto)}
.espejo__frase{font-size:17px;line-height:1.55}
.chatbox__intro,.orders__intro{font-size:15.5px;color:var(--texto-2)}
.deck__hint,.deck__cap,.preview__note,.stagebar__hint,.mockwrap__cap,.sello__nota{font-family:var(--sans);font-size:13.5px}
.workbox__head{font:600 13px/19px var(--sans);letter-spacing:.18em;color:var(--texto-2)}
.workbox__head b{color:var(--texto)}
/* ── el precio es DATO: tabular, entero, jamás serif ni dorado ── */
.precios-entrada{font-family:var(--sans);letter-spacing:.06em;text-transform:none;color:var(--texto-2)}
.precios-entrada b{font:600 var(--t-precio-entrada)/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--texto);letter-spacing:0}
.preciotag{font:400 15px/1.4 var(--sans);color:var(--texto-2);letter-spacing:.02em}
.preciotag b{font:600 var(--t-precio-heroe)/1.15 var(--mono);font-variant-numeric:tabular-nums;color:var(--brasa);letter-spacing:0}
.preciotag .preciotag__qr{color:var(--texto-2);text-transform:none;letter-spacing:.02em}
/* ── la entrega y la devolución, dichas en la cara (Paquete A) ── */
.sample__nota{max-width:640px;margin:20px auto 0;font:400 16px/1.65 var(--sans);color:var(--texto-2);text-align:center}
.espejo__precio{font:400 16px/1.4 var(--sans);color:var(--texto-2)}
.espejo__precio b{font:600 var(--t-precio-heroe)/1.15 var(--mono);font-variant-numeric:tabular-nums;color:var(--brasa)}
.out__total{font-family:var(--sans);color:var(--texto-2)}
.out__total b{font:600 22px/1.2 var(--mono);color:var(--brasa)}
.mat__desc b{font:600 14px/1 var(--mono);color:var(--brasa)}
/* ── el folio es DATO: mono, sin teatro ── */
.out__folio{font:600 var(--t-folio)/1.35 var(--mono);letter-spacing:.08em;color:var(--texto)}
.orders__folio{font:600 13px/1.5 var(--mono);letter-spacing:.08em;color:var(--texto)}
.sello__linea{font:500 14px/1.6 var(--mono);color:var(--texto)}
.sello__hash{font-family:var(--mono)}
/* el estado se lee por forma + posición + palabra: borde discontinuo */
.out{border:none;padding:0;margin:0}
.out.con-pedido{border:1.5px dashed var(--borde);padding:16px;margin-top:16px}
.orders__item{border:1.5px dashed var(--borde);padding:13px 12px;margin-top:10px}
/* la frontera dentro de la casa: la misma línea, otra escala */
.frontera{border-top:1px solid var(--borde);margin:38px 0 0;text-align:center}
.frontera span{display:inline-block;transform:translateY(-9px);background:var(--piedra);padding:0 14px;font:400 13px/19px var(--sans);color:var(--texto-3);letter-spacing:.06em}
/* ── la marca PRUEBA: banda diagonal + borde discontinuo, permanente ── */
.mock{outline:1.5px dashed rgba(237,233,221,.4);outline-offset:-7px}
.prueba{position:absolute;top:50%;left:-14%;right:-14%;transform:translateY(-50%) rotate(-16deg);text-align:center;background:rgba(3,6,8,.48);color:rgba(237,233,221,.88);font:600 12px/1 var(--mono);letter-spacing:.55em;padding:7px 0 7px .55em;pointer-events:none;z-index:6}
.esc__main.aprobada .prueba{display:none}
.esc__main.aprobada .mock{outline:none}
/* el sello de APROBADO: círculo sólido sobre la esquina, fijo */
.esc__main{position:relative}
.sello-tarjeta{position:absolute;top:6px;right:2px;z-index:8;width:104px;height:104px;border-radius:50%;background:var(--brasa);color:var(--brasa-tinta);display:flex;align-items:center;justify-content:center;font:600 13.5px/1.2 var(--mono);letter-spacing:.12em;transform:rotate(-8deg);box-shadow:0 0 0 2px rgba(232,147,79,.35)}
.sello-tarjeta[hidden]{display:none}
/* ── el único botón de compra: brasa con su tinta ── */
.compose-btn{background:var(--brasa);border:1px solid var(--brasa);color:var(--brasa-tinta);font:600 16px/1.2 var(--sans);font-style:normal;min-height:56px;letter-spacing:.02em;transition:background var(--dur-micro) var(--curva-respuesta)}
.compose-btn:hover{background:var(--brasa)}
.compose-btn:disabled{opacity:.55}
.btnchat{background:var(--dorado-accion);border-color:var(--dorado-accion);color:#1D0F04;min-height:48px}
/* toques de la vara: nada operable bajo 48px */
.mat{min-height:48px}
.chat__chip{min-height:48px;display:inline-flex;align-items:center}
.orders__copy{min-height:40px;display:inline-flex;align-items:center}
.flipbtn{min-height:48px}
.puerta-revendedor a{display:inline-flex;align-items:center;min-height:48px}
/* movimiento gobernado: duraciones y curva del acta */
.mat,.prodcard,.dcard,.orders__copy,.btnquiet{transition-duration:var(--dur-hoja);transition-timing-function:var(--curva-respuesta)}
.flip.is-back-css{transition:transform var(--dur-escenario) var(--curva-respuesta)}
/* el acetato se mira sobre claro Y oscuro: la lámina sobre dos fondos */
.mockstage.sobre-fondos,.stage3d-wrap.sobre-fondos{background:linear-gradient(90deg,#D8D2C0 0 50%,#0B0F13 50% 100%);padding:16px 12px}
.mock--acetato .arte__img{opacity:.45}
.mock--acetato{background:rgba(20,29,36,.25)}
.acetato-nota{margin:2px 0 0;font:400 15px/1.55 var(--sans);color:var(--texto-2);max-width:56em}
.acetato-nota b{color:var(--texto)}
.acetato-nota[hidden]{display:none}
/* los dos grupos del pie no comparten fila */
.doors__grupo{font:600 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--texto-3);margin:0 0 8px}
.doors--templo{margin-top:22px}
/* el error siempre con su palabra */
.formnote{border-color:var(--error);color:#E8A58F}
@media(max-width:900px){
  .sello-tarjeta{width:88px;height:88px;font-size:12px}
  .cabecera{padding-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .prueba{transform:translateY(-50%) rotate(-16deg)}
}

/* ── ACTA MADRE en la sala (2026-10-17): la palabra del dinero, las
   tres comprobaciones de la prueba, el gesto que se aprende ── */
.out__falta{font:700 19px/1.3 var(--sans);letter-spacing:.04em;color:var(--texto)}
.sin-tinta{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:8;margin:0;max-width:92%;
  background:var(--piedra);border:1px solid var(--borde);border-radius:4px;padding:9px 13px;
  font:600 12.5px/1.45 var(--mono);color:var(--texto);text-align:center}
.sello-causa{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:8;margin:0;width:min(94%,520px);
  background:var(--superficie-1);border:1.5px dashed var(--error);border-radius:6px;padding:10px 14px;
  font:500 13.5px/1.5 var(--sans);color:var(--texto);text-align:center}
.esc__main{position:relative}
.esc__main.tamano-real .stage3d,.esc__main.tamano-real .stage3d-wrap{max-width:336px;margin-left:auto;margin-right:auto}
.tamano-real-cap{margin:12px auto 0;max-width:520px;text-align:center;font:500 14px/1.55 var(--sans);color:var(--texto-2)}
.stagebar__hint{transition:opacity var(--dur-hoja) var(--curva)}
body.gesto-aprendido .stagebar__hint{opacity:0}

/* ════════════════════════════════════════════════════════════════════
   FASE DE FORMA (2026-10-17) — la vara del Sistema Visual, aplicada
   sobre el legado: Fraunces jamás bajo 20px en la interfaz, ningún
   texto funcional bajo el suelo de la escala (caption 13/19), la voz
   operable en sans y los nombres de acabado como se nombran: por
   cómo brillan. La tarjeta impresa (el objeto) no se toca: es el
   producto aceptado, gobernado por las medidas de imprenta del §5.
   ════════════════════════════════════════════════════════════════════ */
/* las etiquetas de la casa suben al suelo de la escala */
body.world--print .roman{font-size:11.5px;letter-spacing:.22em}
body.world--print .sample__label{font-size:11.5px;letter-spacing:.22em}
/* la línea en inglés bajo el titular: sans, no serif bajo 20px */
.en-line{font:400 15.5px/1.5 var(--sans);font-style:normal;color:var(--texto-2)}
/* el progreso se lee: 13px, la caption de la escala */
.progreso__paso{font-size:13px;line-height:1.35;letter-spacing:.08em;padding-top:10px}
/* «Escoge cómo brilla» — la voz nombra el acabado (cruce del espejo) */
.mat__titulo{margin:8px 0 2px;font:italic 480 20px/1.3 var(--serif);font-variation-settings:"WONK" 0;color:var(--dorado-luz)}
.mat__nombre{font:italic 480 20px/1.2 var(--serif);font-variation-settings:"WONK" 0;color:var(--texto)}
.mat__desc{font-size:13px;color:var(--texto-2)}
.mat__estado{font-size:11.5px;letter-spacing:.12em}
.mat{gap:10px}
/* botones y etiquetas funcionales: nada bajo el suelo */
.orders__copy{font-size:11.5px;letter-spacing:.14em}
.btnquiet{font-size:12px}
.espejo__regla{font-size:12px;letter-spacing:.14em}
.chat__chip{font-size:13.5px}
.deckfilter .chip{font-size:12px;min-height:40px;padding:9px 12px}
.dfilter{font-size:11.5px;min-height:40px}
/* la baraja nombra: diseño y oficio, legibles */
.dcard__nombre{display:block;padding:8px 10px 0;font:600 12.5px/1.3 var(--sans);color:var(--texto)}
.dcard__fam{display:block;padding:2px 10px 9px;font:500 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
/* los demás productos: nombre operable en sans, sin serif bajo 20px */
.prodcard__name{font:600 16px/1.25 var(--sans);color:var(--texto)}
.prodcard__en{font-size:10.5px}
.prodcard__tag{font:italic 400 13.5px/1.35 var(--sans)}
/* la propuesta del QR y el sello: la voz a su tamaño gobernado */
.qrprop__line{font:italic 480 20px/1.35 var(--serif);font-variation-settings:"WONK" 0}
.qrprop__look{font:inherit}
.qrprop__copy{font:400 14.5px/1.55 var(--sans);color:var(--texto-2)}
.qrprop__state{font-size:11.5px}
.qrprop__check span{font:400 15px/1.45 var(--sans)}
.sello__tit{font-size:20px}
/* notas y palabra del dinero: sans llana, legible al sol */
.formnote{font:400 15px/1.5 var(--sans)}
.f__hint{font:400 13.5px/1.45 var(--sans);color:var(--texto-2)}
.out__pago{font:400 15.5px/1.6 var(--sans)}
.chat__door{font:400 14px/1.5 var(--sans)}
/* los controles del escenario hablan en sans, no en serif chica */
.flipbtn{font:600 14.5px/1.2 var(--sans)}
.wabtn{font:600 15px/1.25 var(--sans)}
/* el campo del origen en el paso de WhatsApp («¿Te mandó alguien?») */
.out__origen{margin-top:18px;border-top:1px solid var(--borde);padding-top:14px}
.out__origen-q{margin:0;font:italic 400 15.5px/1.5 var(--serif);color:rgba(255,255,255,.88)}
.out__origen-q span{font:400 12px/1.5 var(--sans);color:rgba(255,255,255,.5)}
.out__origen-q b{color:var(--gold-soft)}
.out__origen-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.origen__chip{appearance:none;background:transparent;border:1px solid var(--gold);color:var(--gold-soft);font:500 12.5px/1 var(--sans);letter-spacing:.04em;padding:11px 15px;border-radius:99px;cursor:pointer}
.origen__chip:disabled{opacity:.45;cursor:default}
.out__origen-fila{display:flex;gap:9px;margin:12px 0 0;flex-wrap:wrap}
.out__origen-fila input{flex:1;min-width:180px;background:rgba(255,255,255,.04);border:1px solid var(--borde);color:var(--texto);font:400 14.5px/1.4 var(--sans);padding:11px 13px}
.out__origen-fila input:focus{outline:none;border-color:var(--gold)}
.out__origen-nota{margin:12px 0 0;font:italic 400 14.5px/1.5 var(--serif);color:var(--gold-soft)}

/* ── LA REFERENCIA DEL VISITANTE (ronda 6, 2026-10-18) ── */
.chat__ref{margin:10px 0 2px}
.chat__refbtn{width:100%;background:rgba(255,255,255,.03);border:1px dashed var(--borde);color:var(--gold-soft);font:500 13.5px/1.35 var(--sans);padding:10px 12px;cursor:pointer;text-align:center}
.chat__refbtn:hover{border-color:var(--gold);color:var(--gold)}
.chat__refimg{display:block;max-width:210px;width:100%;height:auto;border:1px solid var(--borde);margin:2px 0}

/* ── CIERRE HONESTO · ACTA DE LA PLATAFORMA ÚNICA §7.3 (2026-10-25) ── */
.cierre-banner{position:relative;z-index:4;margin:18px auto 0;width:min(1180px,calc(100% - 46px));border:1px dashed var(--borde);padding:16px 20px;background:rgba(3,6,8,.55)}
.cierre-banner__rotulo{margin:0;font:600 11px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.cierre-banner__txt{margin:8px 0 0;font:italic 400 15.5px/1.55 var(--serif);color:rgba(255,255,255,.78)}