/* =========================================================
   Tarjeta con Realidad Aumentada — Grafeco
   Los colores se sobreescriben desde config.json
   ========================================================= */

/* Archivo (SIL Open Font License 1.1, ver vendor/OFL-Archivo.txt), servida
   desde el propio sitio: una sola fuente variable con peso 100-900 y ancho
   62-125 %, que es lo que usa la maqueta (font-stretch 118 % y 125 %).
   Sin depender de Google: funciona en redes que lo bloquean y no avisa a
   nadie quién abrió la tarjeta. */
@font-face{
  font-family:"Archivo";
  src:url("vendor/archivo-variable.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  --primario:#00c2a8;
  --fondo:#0b1f1a;
  --fondo-2:#123028;
  --texto:#f2fbf8;
  --texto-tenue:#9dc4b8;
  --sobre-primario:#04140f;   /* texto sobre el color primario: app.js elige negro o blanco */
  --radio:16px;
  --sombra:0 8px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;padding:0;height:100%;
  background:var(--fondo);
  color:var(--texto);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;
}

body{overflow:hidden}

.oculto{display:none !important}

/* ---------- Pantallas ---------- */
.pantalla{
  position:fixed;inset:0;z-index:30;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:28px;padding:32px 24px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
  text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,var(--fondo-2) 0%,var(--fondo) 70%);
  overflow-y:auto;
}

.marca{display:flex;flex-direction:column;align-items:center;gap:8px}
.marca img{max-width:180px;max-height:80px;object-fit:contain}
.marca h1{margin:0;font-size:1.65rem;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.marca p{margin:0;color:var(--texto-tenue);font-size:1rem}
.marca .empresa{color:var(--primario);font-weight:600;margin-top:2px}

.instruccion{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:300px}
.instruccion p{margin:0;color:var(--texto-tenue);font-size:.95rem;line-height:1.5}
.icono-tarjeta{width:64px;height:64px;color:var(--primario);opacity:.9}

/* ---------- Botones ---------- */
.boton-principal{
  appearance:none;border:0;cursor:pointer;
  background:var(--primario);
  color:var(--sobre-primario);
  font:inherit;font-weight:650;font-size:1.05rem;
  padding:16px 34px;border-radius:999px;
  box-shadow:0 6px 24px color-mix(in srgb,var(--primario) 40%,transparent);
  transition:transform .12s ease;
}
.boton-principal:active{transform:scale(.97)}

.boton-texto{
  appearance:none;border:0;background:none;cursor:pointer;
  color:var(--texto-tenue);font:inherit;font-size:.9rem;
  text-decoration:underline;text-underline-offset:4px;padding:8px;
  display:inline-block;
}
.boton-texto.diag{font-size:.78rem;opacity:.65}

.estado-carga{
  margin:0;font-size:.88rem;color:var(--primario);
  display:flex;align-items:center;gap:9px;min-height:1.2em;
}
.estado-carga::before{
  content:"";width:13px;height:13px;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--primario) 35%,transparent);
  border-top-color:var(--primario);border-radius:50%;
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.estado-carga::before{animation-duration:2.4s}}

.tarjeta-aviso{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radio);
  padding:28px 24px;max-width:360px;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.tarjeta-aviso h2{margin:0;font-size:1.2rem}
.tarjeta-aviso p{margin:0;color:var(--texto-tenue);font-size:.92rem;line-height:1.55}
.tarjeta-aviso .pista{color:var(--texto)}
/* El detalle del error puede traer una lista de intentos, una por renglón. */
#error-detalle{white-space:pre-line;text-align:left;overflow-wrap:anywhere}

/* ---------- Escena RA ---------- */
#contenedor-ar{position:fixed;inset:0;z-index:0}
#contenedor-ar a-scene{width:100%;height:100%}

/* ---------- Cartel de escaneo ---------- */
.escaneando{
  position:fixed;z-index:20;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  pointer-events:none;
}
.escaneando p{
  margin:0;font-size:.95rem;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.mira{
  position:relative;width:min(66vw,270px);aspect-ratio:9/5;
}
.mira span{
  position:absolute;width:30px;height:30px;
  border:3px solid var(--primario);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
  animation:latido 1.8s ease-in-out infinite;
}
.mira span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.mira span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.mira span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.mira span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
@keyframes latido{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- Barra de acciones ---------- */
.acciones{
  position:fixed;z-index:25;
  left:0;right:0;bottom:0;
  display:flex;gap:10px;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-x:auto;
  justify-content:flex-start;
  background:linear-gradient(to top,rgba(4,12,10,.92) 30%,transparent);
  scrollbar-width:none;
  animation:subir .35s ease both;
}
.acciones::-webkit-scrollbar{display:none}
@keyframes subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.acciones.estatica{
  position:static;background:none;animation:none;
  flex-wrap:wrap;justify-content:center;padding:0;
}

.accion{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:74px;padding:10px 4px;
  text-decoration:none;color:var(--texto);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.68rem;font-weight:550;text-align:center;line-height:1.15;
  cursor:pointer;
  transition:transform .12s ease,background .2s ease;
}
.accion:active{transform:scale(.94);background:rgba(255,255,255,.18)}
.accion svg{width:24px;height:24px;stroke:var(--primario);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.accion.destacada{background:var(--primario);border-color:var(--primario);color:var(--sobre-primario)}
.accion.destacada svg{stroke:var(--sobre-primario)}

/* ---------- Salir ---------- */
.boton-salir{
  position:fixed;z-index:26;
  top:calc(14px + env(safe-area-inset-top));right:14px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.45);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.version{
  margin:2px 0 0;font-size:.66rem;color:var(--texto-tenue);opacity:.45;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;
}

.credito{
  margin:4px 0 0;font-size:.7rem;color:var(--texto-tenue);opacity:.7;
  max-width:34ch;line-height:1.4;
}

/* ---------- Botón de sonido ---------- */
.boton-sonido{
  right:64px;
  display:grid;place-items:center;
}
.boton-sonido svg{
  width:20px;height:20px;fill:none;
  stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Orientación automática / manual ---------- */
.boton-orientacion{
  right:114px;
  display:grid;place-items:center;
  padding:0;
}
.boton-orientacion svg{
  width:20px;height:20px;fill:none;
  stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.boton-orientacion span{
  position:absolute;right:1px;bottom:0;
  min-width:14px;height:14px;padding:0 2px;border-radius:7px;
  display:grid;place-items:center;
  background:var(--primario);color:#04140f;
  font:700 9px/1 system-ui,sans-serif;
}

/* ---------- Escritorio ---------- */
@media (min-width:760px){
  .acciones{justify-content:center}
}

/* ---------- Botón de giro manual ---------- */
.boton-girar{
  right:164px;
  display:grid;place-items:center;padding:0;
}
.boton-girar svg{
  width:20px;height:20px;fill:none;
  stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* Salida manual cuando la cámara queda colgada al volver de otra aplicación.
   Sólo aparece después de 6 s buscando, así que en uso normal no se ve. */
.boton-reintentar {
  margin-top: 18px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boton-reintentar:disabled { opacity: .6; }

/* Panel de ajuste: sólo con ?aj=1 */
.panel-ajuste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(0,0,0,.62); padding: 8px 6px 10px;
  backdrop-filter: blur(6px);
}
.panel-ajuste .pa-fila { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.panel-ajuste button {
  min-width: 42px; padding: 9px 8px; font-size: 15px; line-height: 1;
  border: 1px solid rgba(255,255,255,.4); border-radius: 9px;
  background: rgba(255,255,255,.10); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.panel-ajuste button:active { background: rgba(255,255,255,.28); }
.pa-lectura {
  margin-top: 7px; text-align: center; color: #fff;
  font: 500 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3px;
}

.panel-ajuste .pa-fila + .pa-fila { margin-top: 5px; }
.pa-et { align-self: center; color: rgba(255,255,255,.66); font-size: 12px; letter-spacing: .4px; }

/* Con ?aj=1 la barra de contacto estorba: el panel ocupa ese mismo lugar. */
html.modo-ajuste #acciones { display: none !important; }
.panel-ajuste { z-index: 90; }

/* Que las dos filas entren sin desbordarse en pantallas de 360 px */
.panel-ajuste button { min-width: 38px; padding: 8px 6px; font-size: 14px; }
.panel-ajuste .pa-fila { gap: 4px; }
.pa-et { font-size: 11px; }

/* =========================================================
   PORTADA — lo primero que se ve al escanear el QR.
   Dos caminos: el holograma (la RA) y la micro página.
   ========================================================= */
.portada{gap:26px}
.portada .marca img{max-width:210px;max-height:86px}
/* Logos oscuros sobre fondo oscuro no se ven: con "invertirLogo" en el
   config se pasan a blanco. */
.logo-claro{filter:brightness(0) invert(1)}

.opciones{
  width:100%;max-width:380px;
  display:flex;flex-direction:column;gap:12px;
}
.opcion{
  appearance:none;width:100%;margin:0;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:15px 14px 15px 14px;
  border-radius:18px;text-align:left;
  font:inherit;color:var(--texto);
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.2);
  transition:transform .12s ease,background .2s ease,opacity .2s ease;
}
.opcion:active{transform:scale(.98)}
.opcion:focus-visible{outline:3px solid #fff;outline-offset:3px}
.opcion:disabled{opacity:.62;cursor:progress}
.opcion.principal{
  background:var(--primario);border-color:var(--primario);color:var(--sobre-primario);
  box-shadow:0 12px 32px -8px color-mix(in srgb,var(--primario) 70%,transparent);
}
.opcion-icono{
  width:52px;height:52px;flex:none;padding:8px;border-radius:14px;
  background:rgba(255,255,255,.14);
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.opcion-icono .destello{stroke-width:2.4;opacity:.85}
.opcion-icono .haz{stroke-dasharray:2 2.4;opacity:.8}
.opcion-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.opcion-texto strong{font-size:1.22rem;font-weight:750;letter-spacing:-.01em;line-height:1.15}
.opcion-texto small{font-size:.86rem;line-height:1.35;opacity:.86}
.opcion-flecha{
  width:22px;height:22px;flex:none;opacity:.85;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* =========================================================
   MICRO PÁGINA — sigue la maqueta "Tarjeta digital (celular)":
   tarjeta con marcas de corte y barra de control de color,
   acciones grandes, secciones con títulos anchos.
   Los colores salen del config (tema "kraft" o "color").
   ========================================================= */
#pagina{
  position:fixed;inset:0;z-index:35;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  color:var(--pg-tinta,#173024);
  /* El lienzo queda QUIETO: #pagina es el que se desplaza, y el fondo de un
     contenedor con scroll propio no corre con el contenido. Velo arriba de
     la imagen para que la tarjeta y los botones se lean. */
  background-color:var(--pg-lienzo,var(--pg-fondo,#F1F2EE));
  background-image:var(--pg-velo,none),var(--pg-imagen,none);
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  /* `#pagina` es el visor fijo y sólo se desplaza su contenido: la imagen
     queda quieta detrás de la hoja, incluso en Safari móvil. */
  background-attachment:scroll;
  font-family:"Archivo","Helvetica Neue","Liberation Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-align:left;
}
#pagina a{color:inherit}
#pagina a:focus-visible,#pagina button:focus-visible{outline:3px solid var(--pg-tinta);outline-offset:3px}

.pg{
  width:100%;max-width:430px;margin:0 auto;
  display:flex;flex-direction:column;gap:26px;
  padding-top:env(safe-area-inset-top);
}
/* La hoja: las secciones van sobre un papel que sube por encima del lienzo
   al desplazar, con las puntas redondeadas y su sombra. */
.pg-hoja{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:40px;
  margin:10px 10px 0;padding:34px 0 calc(40px + env(safe-area-inset-bottom));
  min-height:70vh;
  /* Papel translúcido: deja ver el fondo fijo al desplazarse. La asimetría
     evita el efecto de una tarjeta rectangular pegada encima.
     AR72: SIN backdrop-filter. Desenfocar lo que hay detrás de una hoja de
     casi 3000 px se recalcula en cada cuadro del desplazamiento y en
     celulares económicos hace que la página baje a los tirones; medido en
     el banco, el desenfoque cambiaba los píxeles 1 a 2 niveles de 255 en
     promedio, o sea que no se veía. Un poco más de papel (86 %) compensa. */
  background-color:rgba(245,247,251,.9);
  background-color:color-mix(in srgb,var(--pg-fondo,#F1F2EE) 86%,transparent);
  background-image:linear-gradient(145deg,rgba(255,255,255,.32),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.48);
  border-radius:46px 30px 0 0 / 34px 24px 0 0;
  box-shadow:0 -18px 46px -22px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.54);
}
.pg-hoja>*{position:relative;z-index:1}
/* Dentro de la hoja las secciones pierden un poco de margen: la hoja ya
   tiene el suyo contra el borde de la pantalla. */
.pg-hoja .pg-seccion{padding:0 18px}
.pg-hoja .pg-pie{padding:4px 18px 0}
@media (min-width:470px){ .pg-hoja{border-radius:46px 30px 28px 38px / 34px 24px 30px 26px;margin-bottom:28px;min-height:0} }

/* Lo que va apoyado sobre el lienzo lleva sombra propia: con el fondo a la
   vista, un botón sin sombra se funde. */
.pg-rapida,.pg-cuadrado,.pg-holo{box-shadow:0 10px 22px -14px rgba(0,0,0,.75)}
.pg-cabeza .pg-lleno{box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
.pg-cabeza{display:flex;flex-direction:column;gap:14px}

/* La tarjeta, con sus marcas de corte */
.pg-marco{position:relative;padding:20px 20px 30px}
.pg-esquina{position:absolute;width:20px;height:20px;fill:none;stroke:var(--pg-marcas,var(--pg-tinta));stroke-width:1.2}
.pg-esquina.a{top:0;left:0}
.pg-esquina.b{top:0;right:0;transform:scaleX(-1)}
.pg-esquina.c{bottom:10px;left:0;transform:scaleY(-1)}
.pg-esquina.d{bottom:10px;right:0;transform:scale(-1,-1)}

.pg-tarjeta{
  position:relative;overflow:hidden;
  background:var(--pg-papel);border-radius:3px;padding:22px;
  color:var(--pg-papel-tinta);
  box-shadow:0 1px 0 color-mix(in srgb,var(--pg-tinta) 22%,transparent),
             0 22px 38px -18px rgba(0,0,0,.72);
}
.pg-textura{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pg-textura.kraft{mix-blend-mode:multiply;opacity:.35}
.pg-textura.rayas{
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 22px,rgba(255,255,255,0) 22px 64px);
}
.pg-tarjeta-cuerpo{position:relative;display:flex;flex-direction:column;gap:20px}
.pg-tarjeta-arriba{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pg-avatar{
  width:68px;height:68px;flex-shrink:0;border-radius:50%;overflow:hidden;
  background:#F6F6F2;
  box-shadow:0 0 0 2px var(--pg-papel-tinta),0 0 0 5px var(--pg-papel-solido),0 0 0 6px var(--pg-papel-tinta);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;font-stretch:118%;letter-spacing:.02em;color:var(--pg-tinta);
}
.pg-avatar img{width:100%;height:100%;object-fit:cover}
.pg-marca{padding-top:4px;font-size:17px;font-weight:800;font-stretch:125%;letter-spacing:.01em}
.pg-marca img{display:block;height:34px;width:auto;max-width:150px;object-fit:contain}
.pg-nombre{
  margin:0;display:flex;flex-direction:column;
  font-size:clamp(21px,6.8vw,27px);line-height:1.04;font-weight:800;font-stretch:118%;
  letter-spacing:-.005em;text-wrap:balance;
}
.pg-prefijo{font-size:16px;font-weight:700;letter-spacing:0}
.pg-cargo{margin:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.pg-cargo b{font-size:16px;font-weight:650}
.pg-cargo span{font-size:14px;font-weight:500}

.pg-control{position:absolute;left:36px;bottom:9px;height:9px;display:flex}
.pg-control span{width:12px}
.pg-registro{position:absolute;right:36px;bottom:7px;width:14px;height:14px;fill:none;stroke:var(--pg-marcas,var(--pg-tinta));stroke-width:1.2}

/* Acciones */
.pg-rapidas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 20px}
.pg-rapida{
  min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--pg-boton);border:1.5px solid var(--pg-tinta);border-radius:10px;
  color:var(--pg-tinta);text-decoration:none;font-size:14px;font-weight:600;
}
.pg-rapida:active,.pg-contorno:active,.pg-red:active{background:color-mix(in srgb,var(--pg-acento) 10%,var(--pg-boton))}
.pg-ico{width:24px;height:24px;fill:none;stroke:var(--pg-acento);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pg-guardar{display:flex;gap:10px;padding:0 20px}
.pg-lleno{
  appearance:none;flex-grow:1;min-height:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pg-acento);color:#FBFBF9;border:0;border-radius:12px;
  font:inherit;font-size:16px;font-weight:650;
}
.pg-lleno .pg-ico{stroke:#FBFBF9;width:22px;height:22px}
.pg-cuadrado{
  appearance:none;width:52px;height:52px;flex-shrink:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--pg-boton);border:1.5px solid var(--pg-tinta);border-radius:12px;color:var(--pg-tinta);
}
.pg-cuadrado .pg-ico{stroke:var(--pg-tinta);width:22px;height:22px}
.pg-aviso{
  margin:-4px 20px 0;font-size:13px;line-height:1.35;color:var(--pg-tenue);min-height:1em;
}

/* Llamada al holograma */
.pg-holo{margin:0 20px;padding:16px;display:flex;flex-direction:column;gap:14px;
  background:var(--pg-boton);border:1.5px solid var(--pg-tinta);border-radius:12px}
.pg-holo-fila{display:flex;align-items:center;gap:14px}
.pg-holo-icono{
  width:48px;height:48px;flex:none;border-radius:10px;background:var(--pg-papel);
  display:flex;align-items:center;justify-content:center;
}
.pg-holo-icono svg{width:30px;height:30px;fill:none;stroke:var(--pg-papel-tinta);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pg-holo-texto{display:flex;flex-direction:column;gap:2px}
.pg-holo-texto b{font-size:16px;line-height:1.25;font-weight:700}
.pg-holo-texto span{font-size:14px;line-height:1.35;color:var(--pg-tenue)}
.pg-holo .pg-lleno{flex-grow:0;width:100%}

/* Secciones */
.pg-seccion{display:flex;flex-direction:column;gap:16px;padding:0 24px}
.pg-seccion.corta{gap:10px}
.pg-h2{margin:0;font-size:22px;line-height:1.1;font-weight:700;font-stretch:125%;color:var(--pg-tinta)}
.pg-p{margin:0;font-size:16px;line-height:1.55;color:var(--pg-texto);text-wrap:pretty}
.pg-grupos{display:flex;flex-direction:column;gap:22px}
.pg-grupo{display:flex;flex-direction:column;gap:10px}
.pg-h3{margin:0;font-size:15px;line-height:1.2;font-weight:700;color:var(--pg-acento)}
.pg-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pg-lista li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.35;color:var(--pg-tinta)}
.pg-lista li::before{content:"";width:7px;height:7px;flex-shrink:0;background:var(--pg-acento)}

/* Muestrario: fotos reales optimizadas y, cuando el cliente no trae fotos,
   mini piezas de imprenta dibujadas con CSS. */
.pg-muestrario{gap:18px}
.pg-muestras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pg-muestra{
  min-width:0;overflow:hidden;padding:8px 8px 12px;
  display:flex;flex-direction:column;gap:10px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.62);border-radius:16px;
  box-shadow:0 11px 24px -22px rgba(4,23,61,.85);
}
.pg-muestra>b{padding:0 3px;font-size:14px;line-height:1.25;font-weight:700;color:var(--pg-tinta)}
.pg-muestra-visual{
  position:relative;display:block;height:96px;overflow:hidden;border-radius:9px;
  background:#e5eef9;
}
.pg-muestra-visual.foto{height:auto;aspect-ratio:4/3;background:#dce7f4}
.pg-muestra-visual.foto img{display:block;width:100%;height:100%;object-fit:cover}
.pg-muestra-visual::before,.pg-muestra-visual::after,
.pg-muestra-visual i,.pg-muestra-visual i::before,.pg-muestra-visual i::after{
  content:"";position:absolute;display:block;box-sizing:border-box;
}

/* Tres interiores de cuaderno. */
.pg-muestra-visual.rayado{
  background-color:#fbfdff;
  background-image:repeating-linear-gradient(to bottom,transparent 0 15px,rgba(27,91,159,.23) 15px 16px);
}
.pg-muestra-visual.rayado::before{left:25px;top:0;bottom:0;width:1px;background:rgba(226,55,105,.48)}
.pg-muestra-visual.rayado::after{left:7px;top:8px;width:6px;height:6px;border-radius:50%;background:#d7e5f5;box-shadow:0 24px #d7e5f5,0 48px #d7e5f5,0 72px #d7e5f5}
.pg-muestra-visual.cuadriculado{
  background-color:#fbfdff;
  background-image:linear-gradient(rgba(27,91,159,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(27,91,159,.18) 1px,transparent 1px);
  background-size:16px 16px;
}
.pg-muestra-visual.cuadriculado::after{left:24px;top:0;bottom:0;width:1px;background:rgba(226,55,105,.42)}
.pg-muestra-visual.punteado{
  background-color:#fbfdff;
  background-image:radial-gradient(circle,rgba(24,82,146,.45) 1.25px,transparent 1.5px);
  background-position:2px 2px;background-size:15px 15px;
}
.pg-muestra-visual.punteado::after{left:23px;top:0;bottom:0;width:1px;background:rgba(226,55,105,.36)}

/* Cuaderno espiral visto de frente. */
.pg-muestra-visual.cuaderno{background:linear-gradient(145deg,#0c3977,#1672d0)}
.pg-muestra-visual.cuaderno i{
  left:27px;right:16px;top:10px;bottom:10px;border-radius:5px;
  background-color:#fbfdff;
  background-image:repeating-linear-gradient(to bottom,transparent 0 12px,rgba(27,91,159,.2) 12px 13px);
  box-shadow:0 8px 15px rgba(2,17,43,.28);
}
.pg-muestra-visual.cuaderno i::before{left:17px;top:0;bottom:0;width:1px;background:rgba(226,55,105,.42)}
.pg-muestra-visual.cuaderno::before{
  z-index:2;left:18px;top:20px;width:17px;height:5px;border:2px solid #d9e9fa;border-left:0;border-radius:0 8px 8px 0;
  box-shadow:0 15px 0 -2px #0e4d96,0 15px 0 0 #d9e9fa,0 30px 0 -2px #0e4d96,0 30px 0 0 #d9e9fa,0 45px 0 -2px #0e4d96,0 45px 0 0 #d9e9fa;
}

/* Tarjetas apiladas, con banda de marca y simulación de texto impreso. */
.pg-muestra-visual.tarjeta{background:linear-gradient(145deg,#dfeeff,#b7d7f6)}
.pg-muestra-visual.tarjeta::before{
  left:28px;right:13px;top:23px;height:59px;border-radius:7px;background:#0757c8;
  transform:rotate(5deg);box-shadow:0 7px 12px rgba(4,23,61,.22);
}
.pg-muestra-visual.tarjeta i{
  left:14px;right:28px;top:15px;height:59px;border-radius:7px;background:#fff;
  transform:rotate(-4deg);box-shadow:0 8px 16px rgba(4,23,61,.28);
}
.pg-muestra-visual.tarjeta i::before{inset:0 auto 0 0;width:24px;border-radius:7px 0 0 7px;background:#0757c8}
.pg-muestra-visual.tarjeta i::after{
  left:36px;top:16px;width:54px;height:5px;border-radius:9px;background:#164d8b;
  box-shadow:0 11px 0 -1px #86afd9,0 22px 0 -1px #b2cae1;
}

/* Caja plegadiza en isometría. */
.pg-muestra-visual.caja{background:linear-gradient(145deg,#e4f1ff,#a9cef3)}
.pg-muestra-visual.caja i{
  left:50%;top:45px;width:62px;height:43px;background:#3d88d4;
  transform:translateX(-50%);clip-path:polygon(0 0,50% 28%,100% 0,100% 72%,50% 100%,0 72%);
  filter:drop-shadow(0 8px 7px rgba(4,23,61,.25));
}
.pg-muestra-visual.caja i::before{
  left:0;top:-31px;width:62px;height:32px;background:#ddecfb;
  clip-path:polygon(50% 0,100% 67%,50% 100%,0 67%);
}
.pg-muestra-visual.caja i::after{left:30px;top:12px;bottom:0;width:2px;background:rgba(255,255,255,.56);transform:skewY(-25deg)}
.pg-muestra-visual.caja::before{left:17px;right:17px;bottom:7px;border-top:1px dashed rgba(7,87,200,.38)}

/* Respaldo para una muestra futura cuyo tipo todavía no tenga dibujo. */
.pg-muestra-visual.impresion{background:linear-gradient(145deg,#e5eef9,#fff)}
.pg-muestra-visual.impresion::before{left:18px;right:18px;top:19px;bottom:19px;background:#fff;box-shadow:0 6px 16px rgba(4,23,61,.18)}
.pg-muestra-visual.impresion::after{left:27px;right:27px;bottom:25px;height:8px;background:linear-gradient(90deg,#00a0dc 0 25%,#e0007a 25% 50%,#f2d300 50% 75%,#1b1b1b 75%)}

.pg-filas{display:flex;flex-direction:column}
.pg-fila{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;
  border-bottom:1px solid var(--pg-linea);color:var(--pg-tinta);text-decoration:none;
}
.pg-chip{
  width:40px;height:40px;flex-shrink:0;border-radius:8px;background:var(--pg-chip);
  display:flex;align-items:center;justify-content:center;
}
.pg-chip .pg-ico{width:20px;height:20px;stroke:var(--pg-chip-tinta)}
.pg-fila-texto{display:flex;flex-direction:column;gap:1px;min-width:0}
.pg-fila-texto small{font-size:13px;line-height:1.3;color:var(--pg-tenue)}
.pg-fila-texto b{font-size:17px;line-height:1.3;font-weight:650;overflow-wrap:anywhere}
.pg-fila-texto b.largo{font-size:16px}

.pg-qr{
  display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;
  padding:22px 20px 20px;background:#FFFFFF;border:1px solid var(--pg-linea);border-radius:4px;
}
.pg-qr svg{width:207px;height:207px;display:block}
.pg-qr p{margin:0;max-width:250px;font-size:14px;line-height:1.4;color:var(--pg-texto);text-align:center;text-wrap:balance}

.pg-mapa{
  position:relative;height:170px;overflow:hidden;border-radius:10px;
  border:1px solid var(--pg-linea);background:#E6E9E2;
}
.pg-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pg-direccion{display:flex;flex-direction:column;gap:2px}
.pg-direccion b{font-size:16px;line-height:1.35;font-weight:650;color:var(--pg-tinta)}
.pg-direccion span{font-size:15px;line-height:1.35;color:var(--pg-tenue)}
.pg-contorno{
  align-self:flex-start;min-height:48px;display:flex;align-items:center;gap:8px;padding:0 18px;
  background:var(--pg-boton);border:1.5px solid var(--pg-tinta);border-radius:12px;
  color:var(--pg-tinta);text-decoration:none;font-size:15px;font-weight:650;
}
.pg-contorno .pg-ico{width:20px;height:20px}

.pg-redes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-red{
  min-height:68px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 14px;
  background:var(--pg-boton);border:1.5px solid var(--pg-tinta);border-radius:10px;
  color:var(--pg-tinta);text-decoration:none;
}
.pg-red b{font-size:16px;line-height:1.25;font-weight:700}
.pg-red span{font-size:13px;line-height:1.3;color:var(--pg-tenue);overflow-wrap:anywhere}

.pg-pie{display:flex;justify-content:center;padding:4px 24px 0}
.pg-pie span{font-size:13px;line-height:1.4;color:var(--pg-tenue)}
.pg-qr[hidden]{display:none}
.pg-toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  max-width:calc(100vw - 32px);padding:11px 16px;border-radius:12px;
  background:var(--pg-tinta);color:#FBFBF9;font-size:14px;font-weight:600;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  transition:opacity .2s ease,transform .2s ease;
}
.pg-toast.visible{opacity:1;transform:translate(-50%,0)}