/* ===================================================================
   Promo Bags · B2.4 — controles de TINTAS (v2). ADITIVO sobre
   logo-preview-v1.css: aquí sólo vive lo nuevo (selector de tintas,
   filas de plancha, aviso de contraste). Nada de v1 se redefine.
   =================================================================== */

/* ---- ¿cuántas tintas? ---- */
.lp__tintas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .15rem 0 .5rem; }
.lp__tchip {
  font-family: var(--font-body); font-size: .84rem; line-height: 1;
  padding: .55rem .8rem; border-radius: 999px; cursor: pointer;
  background: var(--panel, #1b2224); color: var(--texto, #e9e6df);
  border: 1px solid var(--panel-borde, #2f393b);
  min-height: 44px;                      /* tap target ≥44px */
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lp__tchip:hover { border-color: var(--verde-marca, #7dc05d); }
.lp__tchip:focus-visible { outline: 2px solid var(--verde-marca, #7dc05d); outline-offset: 2px; }
.lp__tchip.is-on {
  background: var(--verde-marca, #7dc05d); color: #10201a;
  border-color: var(--verde-marca, #7dc05d); font-weight: 600;
}

/* ---- una fila por plancha: color detectado → tinta ---- */
.lp__planchas { display: flex; flex-direction: column; gap: .5rem; }
.lp__plancha {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .4rem .5rem; border-radius: 10px;
  background: color-mix(in srgb, var(--panel, #1b2224) 60%, transparent);
  border: 1px solid var(--panel-borde, #2f393b);
}
.lp__pltag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-body); font-size: .8rem; color: var(--texto-tenue, #a9b3b1);
  white-space: nowrap;
}
.lp__plsw {
  width: 18px; height: 18px; border-radius: 5px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 0 2px rgba(0,0,0,.35);
}
/* Tap target ≥44px. v1 dibuja el swatch de tinta a 30px; con 1 tinta eran 7
   botones, ahora son hasta 18 en móvil (6 por plancha) — a 30px se fallan al
   dedo. El COLOR sigue viéndose a 30px: el área táctil crece con padding,
   no el cuadro. (Checklist QC-VISUAL: tap targets ≥44px.) */
.lp__planchas .lp__ink {
  width: 44px; height: 44px; padding: 7px; background-clip: content-box;
}
.lp__inks { gap: .3rem; }

/* la tinta recomendada (auto) se distingue de una elegida a mano */
.lp__ink { position: relative; }
.lp__planchas .lp__ink.is-reco::after {
  content: '★'; position: absolute; right: 1px; top: -1px;
  font-size: .74rem; line-height: 1; color: var(--verde-marca, #7dc05d);
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}

/* ---- notas y avisos ---- */
.lp__sepnote, .lp__warn {
  font-family: var(--font-body); font-size: .78rem; line-height: 1.45; margin: .35rem 0 0;
}
.lp__sepnote { color: var(--texto-tenue, #a9b3b1); }
.lp__warn { color: #f0b429; }

@media (max-width: 480px) {
  .lp__plancha { align-items: flex-start; }
  .lp__pltag { width: 100%; }
}

/* ===================================================================
   B2.4 · INTELIGENCIA: tarjeta de recomendación + full color + costo
   =================================================================== */

/* ---- tarjeta de recomendación (el sistema aconseja en lenguaje de cliente) ---- */
.lp2__reco {
  display: none; align-items: flex-start; gap: .6rem;
  padding: .7rem .8rem; border-radius: 12px; margin: .2rem 0 .7rem;
  background: color-mix(in srgb, var(--panel, #1b2224) 70%, transparent);
  border: 1px solid var(--panel-borde, #2f393b);
  border-left: 4px solid var(--verde-marca, #7dc05d);
}
.lp2__reco.is-flat, .lp2__reco.is-rico, .lp2__reco.is-foto, .lp2__reco.is-empty { display: flex; }
.lp2__reco.is-rico { border-left-color: #4a90d9; }
.lp2__reco.is-foto { border-left-color: #8f7de0; }
.lp2__reco.is-empty { border-left-color: #f0b429; }
.lp2__reco-i { font-size: 1.15rem; line-height: 1.2; flex: 0 0 auto; }
.lp2__reco > div { display: flex; flex-direction: column; gap: .2rem; }
.lp2__reco b {
  font-family: var(--font-body); font-size: .9rem; font-weight: 700;
  color: var(--texto, #e9e6df); line-height: 1.3;
}
.lp2__reco span {
  font-family: var(--font-body); font-size: .8rem; line-height: 1.45;
  color: var(--texto-tenue, #a9b3b1);
}

/* ---- chip "Full color": se distingue de las tintas planas ---- */
.lp__tchip--full {
  background: linear-gradient(90deg,#e0567e,#e0a94a,#4a90d9,#4fb96a) border-box;
  border: 1px solid transparent;
  color: #10201a; font-weight: 600;
  background-clip: padding-box;
  position: relative;
}
.lp__tchip--full { color: var(--texto, #e9e6df); background: var(--panel, #1b2224); border: 1px dashed #8f7de0; }
.lp__tchip--full.is-on { background: #8f7de0; color: #10201a; border-style: solid; border-color: #8f7de0; }

/* ---- nota de costo (educa sin cifras) ---- */
.lp2__cost {
  font-family: var(--font-body); font-size: .78rem; line-height: 1.5;
  color: var(--texto-tenue, #a9b3b1); margin: .5rem 0 0;
}
.lp2__cost.is-full {
  color: var(--texto, #e9e6df);
  background: color-mix(in srgb, #8f7de0 14%, transparent);
  padding: .5rem .6rem; border-radius: 10px;
}

/* ── ESCENARIOS (2.2a) — "míralo en la calle / el tianguis / la tienda" ── */
.lp__label--sub{font-size:.82rem;opacity:.9;margin-top:14px}
.lp__label--sub span{display:none}
.lp__escs .lp__chip{font-size:.86rem}
/* Dentro de un escenario la foto es de una bolsa concreta: cambiar de modelo no
   aplica. Se atenúa en vez de deshabilitar (un control muerto que parece vivo es
   un defecto; aquí sigue siendo clicable y te SACA del escenario). */
.lp__models.is-locked{opacity:.55}

/* ── PROBADOR 3D (B2 · v1) ───────────────────────────────────────────────────
   El 3D vive DENTRO del mismo stage que el 2D y se alternan: nunca están los
   dos a la vez. El 2D sigue siendo el default —es instantáneo, no necesita
   WebGL y es el que se descarga—; el 3D es el "wow" opcional. */
.lp3__host { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.lp3__host.is-hidden { display: none !important; }
.lp__canvas.is-hidden, .lp__overlay.is-hidden { display: none !important; }
.lp3__mv {
  width: 100%; height: 100%; background: transparent; --poster-color: transparent;
  /* SIN esto, en móvil el dedo hace SCROLL de la página en vez de girar la bolsa:
     el navegador se queda el gesto antes de que el visor lo vea. El chip promete
     "gíralo" — si no gira con el dedo, la promesa es falsa. */
  touch-action: none;
}
.lp3__host.is-cargando::after {
  content: "Abriendo el 3D…"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 .95rem/1 system-ui, sans-serif; color: var(--tinta-tenue, #6B7269);
  background: rgba(255,255,255,.75);
}
/* Marca de agua del 3D: va en el DOM y no horneada en la textura —en perspectiva
   una marca tileada se deformaría y dejaría de leerse. */
.lp3__wm {
  position: absolute; inset: -18%; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
  transform: rotate(-24deg);
  font: 700 .78rem/1.2 system-ui, sans-serif; letter-spacing: .10em;
  color: rgba(35,48,43,.22); white-space: nowrap; text-align: center;
}
.lp3__wm span { display: block; }
.lp__chip--3d { font-weight: 700; }

/* Leyenda de honestidad del 3D. Va DENTRO del visor y siempre visible: el
   probador usa la malla de la Strong para los 6 modelos, y eso se dice de
   frente. Contraste suficiente sobre cualquier color de bolsa (fondo propio). */
/* La leyenda NO debe robar el gesto: es informativa. Sin pointer-events:none
   el arrastre sobre ella no giraba el modelo. */
.lp3__nota {
  pointer-events: none;
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 3;
  margin: 0; padding: .55rem .8rem; border-radius: .7rem;
  background: rgba(255,255,255,.94); border: 1px solid rgba(35,48,43,.12);
  color: #3A443E; font-size: .78rem; line-height: 1.35; text-align: center;
  box-shadow: 0 4px 14px rgba(35,48,43,.10);
}
.lp3__nota b { color: #242B26; }
@media (max-width: 480px) { .lp3__nota { font-size: .72rem; padding: .45rem .6rem; } }

/* Selector de 1 / 2 caras — sólo visible dentro del 3D (el 2D no puede mostrar
   el reverso, así que ofrecerlo allí sería prometer lo que no se ve). */
.lp__chip--2c.is-hidden { display: none !important; }
.lp__chip--2c { font-weight: 700; }

/* ── 2 CARAS · misma impresión o diseño distinto ──────────────────────────────
   UX escalonada: por defecto 1 cara y este bloque no existe. Al pedir 2 caras
   aparece UNA pregunta con el default más común ya elegido. Sólo quien pide
   "diseño distinto" ve las pestañas de cara. Saturar la entrada hunde la
   conversión: el que quiere lo simple no paga el costo de la opción avanzada. */
.lp__caras { margin: 10px 0 2px; }
.lp__caras.is-hidden { display: none; }
.lp__caras-modo, .lp__caras-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lp__caras-tabs { margin-top: 8px; }
.lp__caras-tabs.is-hidden { display: none; }
.lp__tab {
  flex: 1 1 0; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--linea, #e0dbce); border-bottom-width: 3px;
  border-radius: 10px 10px 0 0; background: #fff; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit;
}
.lp__tab:hover { border-color: var(--verde-marca, #7dc05d); }
.lp__tab:focus-visible { outline: 2px solid var(--verde-marca, #7dc05d); outline-offset: 2px; }
.lp__tab.is-on { border-bottom-color: var(--verde-marca, #7dc05d); background: #F4F8F1; }
.lp__caras-nota { margin: 8px 0 0; font-size: .86rem; line-height: 1.45; opacity: .85; }

/* Aviso sobre el lienzo: el 2D siempre enseña la foto del FRENTE, así que
   editar el reverso ahí tiene que decirse, no suponerse. */
.lp__caratag {
  position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 4;
  max-width: calc(100% - 24px); padding: 7px 13px; border-radius: 999px;
  background: rgba(25, 24, 23, .86); color: #fff;
  font-size: .8rem; line-height: 1.3; text-align: center; pointer-events: none;
}
.lp__caratag.is-hidden { display: none; }
@media (max-width: 480px) { .lp__caratag { font-size: .72rem; padding: 6px 10px; } }

/* Aviso de fondo: el cliente tiene que entender por qué su conteo de tintas
   bajó (le quitamos el fondo) o por qué no le damos un número (fondo complejo). */
.lp2__reco-fondo { display:block; margin-top:6px; font-size:.83rem; opacity:.9; }
.lp2__reco.is-fondo { border-left-color:#B06E12; }

/* Caso asimétrico: se DESCRIBE la configuración y se dice que la cotiza una
   persona. Se marca distinto para que no se lea como una promesa de precio
   automático — el motor todavía no sabe calcularlo (v3.1). */
.lp__caras-nota.is-manual {
  background: #FFF7EA; border: 1px solid #E8D5AE; border-left: 3px solid #B06E12;
  border-radius: 8px; padding: 9px 11px; opacity: 1;
}

/* Pista de paneo — sólo visible cuando el paneo está disponible (con zoom).
   El botón derecho / Ctrl no se adivinan, y anunciarlos siempre sería ruido
   para quien únicamente quiere girar la bolsa. */
.lp3__pista {
  position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 4;
  margin: 0; max-width: calc(100% - 24px); padding: 7px 13px; border-radius: 999px;
  background: rgba(25, 24, 23, .82); color: #fff;
  font-size: .78rem; line-height: 1.35; text-align: center;
  pointer-events: none;                 /* jamás debe robarle el gesto al visor */
  opacity: 0; transition: opacity .18s ease;
}
.lp3__host.is-paneable .lp3__pista { opacity: 1; }
@media (max-width: 480px) { .lp3__pista { font-size: .7rem; padding: 6px 10px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRASTE SOBRE SECCIÓN OSCURA — fondo y tinta SIEMPRE en pareja
   [E5 11-ago · defecto cazado por Mario en la home pública]

   El probador vive dentro de `.lpsec`, que es OSCURA (--carbon) y reparte por
   herencia un texto CREMA (--texto #F4F1E8). Varios controles se pintaron su
   propio fondo CLARO (pestañas #fff, aviso ámbar #FFF7EA) o su propia tinta
   OSCURA (el CTA del flujo de WhatsApp, pensado para una tarjeta clara) y
   dejaron la otra mitad a la herencia. Resultado medido en vivo: crema sobre
   blanco a razón 1.05–1.13 y tinta oscura sobre carbón a 1.04 — texto que
   EXISTE, es clicable y funciona, pero NO SE VE.

   Regla que queda: un elemento que declara `background` declara también
   `color`, y al revés. Nunca se hereda la mitad de la pareja a través de un
   cambio de superficie. El QC lo comprueba MIDIENDO el ratio real (fondo
   compuesto por toda la cadena de ancestros), no mirando el código.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pestañas Frente/Reverso — fondo claro propio ⇒ tinta oscura propia.
   Las DOS estaban ilegibles (activa 1.05, inactiva 1.13). La activa además
   necesita leerse como activa por algo más que el subrayado verde: tinta
   verde oscura + peso. */
.lp__tab { color: #22302C; }                       /* medido en vivo: 13.7:1 sobre #fff */
.lp__tab.is-on { color: #17512A; font-weight: 700; } /* medido en vivo: 8.7:1 sobre #F4F8F1 */

/* Aviso ámbar de cotización manual — fondo crema propio ⇒ tinta parda propia. */
.lp__caras-nota.is-manual { color: #40300F; }      /* medido en vivo: 12.0:1 sobre #FFF7EA */
.lp__caras-nota.is-manual b { color: #6E4405; }    /*  7.9:1, sigue destacando */

/* Flujo de WhatsApp: el widget w1 se estiliza para una TARJETA CLARA (lo es en
   el catálogo). Aquí cae sobre la sección oscura, así que se re-tinta SOLO en
   este contexto — el catálogo no se toca. */
.lp__waflow .w1__cta { color: var(--texto, #F4F1E8); }
.lp__waflow .w1__hint,
.lp__waflow .w1__intro,
.lp__waflow .w1__msg { color: var(--texto-tenue, #a9b3b1); }
.lp__waflow .w1__msg.ok { color: #9ED97E; }
/* los pasos SÍ traen tarjeta blanca propia: ahí la tinta vuelve a ser oscura */
.lp__waflow .w1__step { color: #22302C; }
.lp__waflow .w1__step .w1__hint { color: #5b6472; }

/* Dos textos de apoyo que se quedaban a un pelo de AA (4.34 y 4.39 medidos):
   se sube el velo del hint y la opacidad del subtítulo del área de subida. */
.lp__hint { background: rgba(20,24,25,.72); }
.lp__dropsub { color: rgba(244,241,232,.72); }

/* El chip "A" (tinta automática) se pinta sobre un conic-gradient #eee→#333:
   la letra en #444 se pierde justo donde el degradado se oscurece. No hay un
   color plano que sirva para las dos mitades, así que la letra lleva su propio
   halo claro. (El medidor de contraste NO ve gradientes: este se cazó MIRANDO
   la captura a zoom, no en el barrido.) */
.lp__ink.is-auto { color: #1b1b1b; text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 1px 0 #fff; }