.hcp-personalizer{--hcp-accent:#ff625d;--hcp-ink:#1f1f1f;--hcp-muted:#8e817b;--hcp-border:#f0cfc6;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,.98fr);gap:24px;max-width:1080px;margin:22px auto;font-family:inherit;color:var(--hcp-ink)}
.hcp-personalizer *{box-sizing:border-box}.hcp-preview-card,.hcp-controls-card{background:#fff;border:1px solid var(--hcp-border);border-radius:28px;padding:24px}.hcp-card-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.hcp-card-title strong{font-size:22px;display:block}.hcp-card-title span:not(.hcp-size-pill){font-size:13px;color:var(--hcp-muted);display:block;margin-top:5px}.hcp-size-pill{font-size:12px;background:#fff7f4;border:1px solid var(--hcp-border);padding:7px 10px;border-radius:999px;white-space:nowrap}
.hcp-stage-wrap{display:flex;justify-content:center;padding:6px}.hcp-stage{position:relative;width:min(430px,90vw);aspect-ratio:1/1;display:grid;place-items:center;touch-action:none;user-select:none}.hcp-ring{position:absolute;width:11%;height:18%;border:5px solid #a7a7a7;border-radius:50%;top:2%;left:50%;transform:translateX(-50%);z-index:0;background:#fff;box-shadow:inset 0 0 0 2px #ddd}.hcp-tag{--hcp-tag-bg:#e6e6e6;--hcp-tag-text:#111;--hcp-tag-ratio:1;--hcp-safe-pct:9%;position:relative;width:82%;aspect-ratio:var(--hcp-tag-ratio);max-height:82%;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--hcp-tag-bg),white 15%),var(--hcp-tag-bg));box-shadow:0 18px 45px rgba(0,0,0,.16),inset 0 0 0 8px rgba(255,255,255,.25),inset 0 0 0 11px rgba(0,0,0,.08);z-index:1;color:var(--hcp-tag-text);transition:all .22s ease}.hcp-shape-round{border-radius:50%}.hcp-shape-square{border-radius:20%}.hcp-shape-heart{clip-path:polygon(50% 96%,8% 55%,3% 36%,6% 20%,17% 8%,31% 5%,42% 11%,50% 22%,58% 11%,69% 5%,83% 8%,94% 20%,97% 36%,92% 55%)}.hcp-shape-bone{clip-path:polygon(10% 18%,18% 8%,29% 8%,36% 23%,64% 23%,71% 8%,82% 8%,90% 18%,90% 34%,82% 42%,90% 50%,90% 66%,82% 76%,71% 76%,64% 61%,36% 61%,29% 76%,18% 76%,10% 66%,10% 50%,18% 42%,10% 34%)}
.hcp-photo-layer{position:absolute;inset:0;background-size:cover;background-position:50% 50%;transform:scale(1);will-change:transform;background-image:radial-gradient(circle at 50% 38%,rgba(255,255,255,.72) 0 18%,rgba(255,255,255,.2) 19% 20%,transparent 21%),linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,255,255,.2));opacity:.88}.hcp-photo-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.03) 0%,rgba(0,0,0,.02) 38%,rgba(0,0,0,.13) 72%,rgba(0,0,0,.28) 100%)}.hcp-safe-line{position:absolute;inset:var(--hcp-safe-pct);border:1.5px dashed rgba(255,255,255,.72);border-radius:inherit;pointer-events:none}.hcp-pet-name{position:absolute;top:10%;left:12%;right:12%;text-align:center;font-weight:900;font-size:clamp(18px,3.5vw,32px);letter-spacing:.05em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.65);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hcp-phone{position:absolute;bottom:12%;left:8%;right:36%;font-size:clamp(10px,2vw,17px);font-weight:800;color:#fff;text-shadow:0 2px 7px rgba(0,0,0,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hcp-qr-box{position:absolute;right:9%;bottom:9%;width:23%;aspect-ratio:1;background:#fff;border-radius:12%;padding:5%;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.18)}.hcp-qr,.hcp-qr img,.hcp-qr canvas{width:100%!important;height:100%!important}.hcp-brand{position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);font-size:9px;font-weight:900;letter-spacing:.16em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.hcp-shape-bone .hcp-pet-name{top:31%;font-size:clamp(15px,2.8vw,25px)}.hcp-shape-bone .hcp-phone{bottom:27%;left:16%;right:32%;font-size:clamp(9px,1.6vw,14px)}.hcp-shape-bone .hcp-qr-box{right:16%;bottom:25%;width:16%}.hcp-shape-bone .hcp-brand{display:none}.hcp-shape-bone .hcp-safe-line{inset:17% 11%}
.hcp-shape-heart .hcp-pet-name{top:23%}.hcp-shape-heart .hcp-phone{bottom:17%;left:13%;right:37%}.hcp-shape-heart .hcp-qr-box{right:13%;bottom:15%;width:20%}.hcp-shape-heart .hcp-brand{bottom:8%}
.hcp-preview-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}.hcp-tool,.hcp-center{appearance:none;border:1px solid var(--hcp-border);background:#fff;border-radius:12px;min-width:44px;height:44px;font-weight:800;cursor:pointer}.hcp-center{padding:0 16px}.hcp-tool:hover,.hcp-center:hover{background:#fff7f4}.hcp-note{font-size:12px;color:var(--hcp-muted);text-align:center;max-width:430px;margin:14px auto 0;line-height:1.45}
.hcp-eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--hcp-accent)}.hcp-header-copy h3{font-size:34px;line-height:1.05;margin:8px 0 10px}.hcp-header-copy p{color:var(--hcp-muted);font-size:15px;line-height:1.5;margin:0 0 18px}.hcp-choice-section{border-top:1px solid #f4e3de;padding-top:16px;margin-top:16px}.hcp-choice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.hcp-choice-head strong{font-size:15px}.hcp-choice-head span{font-size:12px;color:var(--hcp-accent);font-weight:800}.hcp-model-grid,.hcp-color-grid,.hcp-size-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.hcp-color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hcp-model-option,.hcp-color-option,.hcp-size-option{appearance:none;border:1px solid #ead9d4;background:#fff;border-radius:14px;min-height:72px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;font:inherit;color:inherit;transition:.15s ease}.hcp-model-option:hover,.hcp-color-option:hover,.hcp-size-option:hover{border-color:#ff9c96}.hcp-model-option.is-selected,.hcp-color-option.is-selected,.hcp-size-option.is-selected{border:2px solid var(--hcp-accent);background:#fff7f4;box-shadow:0 0 0 2px rgba(255,98,93,.08)}.hcp-model-option span:last-child,.hcp-color-option span:last-child,.hcp-size-option span:last-child{font-size:12px;font-weight:800}.hcp-mini-shape{display:block;width:35px;height:35px;background:linear-gradient(145deg,#fff,#d8d8d8);border:1px solid #aaa;box-shadow:0 4px 8px rgba(0,0,0,.08)}.hcp-mini-round{border-radius:50%}.hcp-mini-square{border-radius:9px}.hcp-mini-heart{clip-path:polygon(50% 96%,8% 55%,3% 36%,6% 20%,17% 8%,31% 5%,42% 11%,50% 22%,58% 11%,69% 5%,83% 8%,94% 20%,97% 36%,92% 55%)}.hcp-mini-bone{width:46px;height:28px;clip-path:polygon(10% 18%,18% 8%,29% 8%,36% 23%,64% 23%,71% 8%,82% 8%,90% 18%,90% 34%,82% 42%,90% 50%,90% 66%,82% 76%,71% 76%,64% 61%,36% 61%,29% 76%,18% 76%,10% 66%,10% 50%,18% 42%,10% 34%)}.hcp-swatch{width:31px;height:31px;border-radius:50%;background:var(--hcp-swatch);border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}.hcp-size-visual{display:block;width:34px;height:34px;border:1.6px solid #777;border-radius:7px;transform:scaleX(clamp(.72,calc(var(--hcp-w)/var(--hcp-h)),1.55))}.hcp-size-option[hidden]{display:none!important}.hcp-personal-data{margin-top:18px;padding-top:2px}.hcp-field{display:block;margin-top:16px}.hcp-field>span{display:block;font-weight:800;margin-bottom:8px}.hcp-field input[type=text],.hcp-field input[type=tel]{width:100%;min-height:52px;border:1px solid var(--hcp-border);border-radius:14px;padding:0 15px;font-size:16px;outline:none;background:#fff}.hcp-field input:focus{border-color:var(--hcp-accent);box-shadow:0 0 0 3px rgba(255,98,93,.12)}.hcp-field small{display:block;color:var(--hcp-muted);font-size:12px;margin-top:6px}.hcp-upload-box{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100px;border:1.5px dashed var(--hcp-accent);border-radius:18px;cursor:pointer;background:#fffdfc}.hcp-upload-box strong{font-size:16px}.hcp-upload-box small{margin-top:5px}.hcp-file-status{font-size:12px;color:#287a45;margin-top:7px}.hcp-layout-hint{margin-top:18px;background:#fff7f4;border-radius:16px;padding:14px 16px}.hcp-layout-hint strong{display:block;font-size:13px}.hcp-layout-hint span{display:block;color:var(--hcp-muted);font-size:12px;margin-top:4px;line-height:1.45}.hcp-empty{padding:18px;border:1px solid #f0cfc6;border-radius:14px;background:#fff7f4}
@media(max-width:860px){.hcp-personalizer{grid-template-columns:1fr;gap:14px;margin:12px auto}.hcp-preview-card,.hcp-controls-card{padding:18px;border-radius:22px}.hcp-header-copy h3{font-size:28px}.hcp-card-title strong{font-size:19px}}
@media(max-width:520px){.hcp-model-grid,.hcp-size-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hcp-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hcp-model-option,.hcp-color-option,.hcp-size-option{min-height:66px;padding:8px 5px}.hcp-stage{width:min(360px,92vw)}}
/* v1.2.0: mockups administrables y capas configurables */
.hcp-tag{container-type:inline-size}
.hcp-mockup-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none;user-select:none}
.hcp-photo-layer{z-index:2}.hcp-photo-shade{z-index:3}.hcp-safe-line{z-index:3}.hcp-pet-name,.hcp-phone,.hcp-qr-box,.hcp-brand{z-index:5}.hcp-has-mockup .hcp-safe-line{opacity:.42}
.hcp-has-mockup .hcp-ring{opacity:.25}
/* v1.3.0: calidad de foto + vista previa en imagen principal del producto */
.hcp-photo-guide{margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff8f6;border:1px solid #f4ded8;line-height:1.4}
.hcp-photo-guide strong{display:block;font-size:12px;margin-bottom:3px}.hcp-photo-guide span{display:block;font-size:12px;color:var(--hcp-muted)}
.hcp-file-status{margin-top:9px;padding:9px 11px;border-radius:11px;background:#f5faf6;color:#287a45;line-height:1.35}.hcp-file-status:empty{display:none}.hcp-file-status strong,.hcp-file-status span{display:block}.hcp-file-status span{font-size:12px;margin-top:2px}.hcp-file-status.is-acceptable{background:#fff8e7;color:#8a6212}.hcp-file-status.is-low{background:#fff0ef;color:#a4322d}
.hcp-product-gallery-live{position:relative!important}.hcp-product-main-live{position:absolute;inset:0;z-index:9;background:#fff;display:grid;place-items:center;overflow:hidden;pointer-events:none}.hcp-product-main-live .hcp-stage{width:min(92%,520px);max-width:92%;height:auto}.hcp-product-main-live .hcp-ring{display:block}.hcp-product-main-live .hcp-safe-line{opacity:.25}.hcp-product-main-live .hcp-stage-wrap{padding:0}
@media(max-width:860px){.hcp-product-main-live .hcp-stage{width:min(90%,430px)}}
/* v1.4.0: composición final tipo producto real */
.hcp-has-mockup .hcp-tag{background:transparent;box-shadow:none}
.hcp-has-mockup .hcp-ring{display:none}
.hcp-mockup-layer{z-index:1;opacity:.82}
.hcp-photo-layer{z-index:2;border-radius:46%;overflow:hidden;background-size:cover;background-repeat:no-repeat;box-shadow:none}
.hcp-photo-shade{z-index:3;opacity:.12;background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.12) 100%)}
.hcp-safe-line{z-index:4;opacity:0!important}
.hcp-pet-name,.hcp-phone,.hcp-qr-box,.hcp-brand{z-index:10!important}
.hcp-pet-name{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:800;letter-spacing:0;text-transform:none;line-height:1.05;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.32);overflow:visible}
.hcp-phone{font-weight:800;line-height:1.15;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.28);overflow:visible}
.hcp-phone:before{content:'☎ ';font-size:.86em}
.hcp-qr-box{padding:4%;border-radius:7%;box-shadow:0 2px 8px rgba(0,0,0,.16);overflow:hidden}
.hcp-brand{font-size:7px;letter-spacing:.12em;text-align:center;white-space:nowrap}
.hcp-has-mockup .hcp-photo-layer{filter:saturate(.98) contrast(1.02)}
.hcp-product-main-live .hcp-mockup-layer{opacity:.62!important}
.hcp-product-main-live .hcp-safe-line{display:none!important}
/* v1.4.1: imagen destacada inicial + centrado real de la foto */
.hcp-photo-layer{transform:none!important;transform-origin:50% 50%!important;background-position:50% 50%;background-repeat:no-repeat;transition:background-position .12s ease,background-size .12s ease}
.hcp-product-main-live{opacity:1;visibility:visible}
/* Mientras el cliente no interactúe, la galería WooCommerce conserva la imagen destacada original. */
.hcp-personalizer:not(.hcp-customization-started)~* .hcp-product-main-live{display:none}
/* v1.4.2: capa de foto anclada al objeto base por centro */
.hcp-photo-layer{transform:translate(-50%,-50%)!important;transform-origin:50% 50%!important;overflow:hidden;background-repeat:no-repeat}
/* El desplazamiento del usuario se hace exclusivamente con background-position; la geometría de capa queda fija. */
.hcp-product-main-live .hcp-photo-layer{transform:translate(-50%,-50%)!important}

/* v1.5.0: composición por capas. El mockup/base queda debajo del área FOTO; el contenido personalizado queda por encima. */
.hcp-has-mockup .hcp-mockup-layer{z-index:1!important}.hcp-has-mockup .hcp-photo-layer{z-index:2!important}.hcp-has-mockup .hcp-photo-shade{z-index:3!important;pointer-events:none}.hcp-has-mockup .hcp-pet-name,.hcp-has-mockup .hcp-phone,.hcp-has-mockup .hcp-qr-box,.hcp-has-mockup .hcp-brand{z-index:10!important}


/* v1.5.1: capa FOTO fija + imagen hija independiente. Evita desplazamientos por transforms heredados. */
.hcp-photo-layer{
  position:absolute!important;
  transform:none!important;
  transform-origin:50% 50%!important;
  overflow:hidden!important;
  background:none!important;
  opacity:1!important;
  border-radius:46%;
  z-index:2!important;
}
.hcp-photo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1);
  transform-origin:50% 50%;
  transition:transform .12s ease,object-position .12s ease;
  user-select:none;
  pointer-events:none;
}
.hcp-photo-img:not([src]),.hcp-photo-img[src=""]{display:none}
.hcp-product-main-live .hcp-photo-layer{transform:none!important}
.hcp-product-main-live .hcp-photo-img{display:block}

/* v1.6.0: editor = frontend 1:1 + enlace seguro con Huellarte Guardian */
.hcp-photo-layer{border-radius:0!important;clip-path:none!important}
.hcp-guardian-status{margin-top:10px;padding:10px 12px;border:1px solid #eadfdc;border-radius:12px;background:#faf8f7;color:#6e625d;font-size:12px;line-height:1.4}
.hcp-guardian-status.is-linked{background:#eef9f1;border-color:#cfead6;color:#176c37}
.hcp-guardian-status.is-info{background:#eef6ff;border-color:#d2e5fa;color:#1f5f95}
.hcp-guardian-status.is-checking{background:#fff8e7;border-color:#f2dfab;color:#7f5d16}
.hcp-field input[type=email]{width:100%;min-height:52px;border:1px solid var(--hcp-border);border-radius:14px;padding:0 15px;font-size:16px;outline:none;background:#fff}
.hcp-field input[type=email]:focus{border-color:var(--hcp-accent);box-shadow:0 0 0 3px rgba(255,98,93,.12)}


/* v1.6.1: la foto del cliente rellena siempre el 100% del área FOTO guardada. */
.hcp-photo-layer{
  overflow:hidden!important;
  background:none!important;
}
.hcp-photo-layer > .hcp-photo-img,
.hcp-product-main-live .hcp-photo-layer > .hcp-photo-img{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  object-fit:cover!important;
  object-position:50% 50%;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hcp-photo-guide .hcp-photo-format{margin-top:5px;font-weight:700;color:#4f4541}

/* v1.7.0: capas opcionales + ajuste tipográfico exacto */
.hcp-pet-name,.hcp-phone{display:flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:clip;padding:0 1%;}
.hcp-phone{line-height:1!important;}
.hcp-pet-name{line-height:1.04!important;}

/* 1.8.0 · validación de producción */
.hcp-production-check{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:3px;font-size:13px}.hcp-production-check strong{font-size:14px}.hcp-production-check.is-ready{background:#edf9f0;border-color:#b8e2c2;color:#176b34}.hcp-production-check.is-warning{background:#fff7e6;border-color:#f0d59c;color:#7b5510}.hcp-production-check.is-pending{background:#f6f7f7;color:#50575e}


/* v1.9.2-stable: coordenadas idénticas al Editor Visual para mockups raster.
   El editor administra todas las capas en un canvas cuadrado 1:1 con el PNG en contain.
   El frontend replica exactamente ese canvas; el tamaño físico sigue guardado aparte para producción. */
.hcp-editor-coordinate-mode .hcp-stage{aspect-ratio:1/1!important;}
.hcp-editor-coordinate-tag{
  aspect-ratio:1/1!important;
  width:82%!important;
  height:auto!important;
  max-height:none!important;
  clip-path:none!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hcp-editor-coordinate-tag .hcp-mockup-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
/* Ningún preset antiguo de forma puede recolocar capas cuando manda el Editor Visual. */
.hcp-editor-coordinate-tag .hcp-photo-layer,
.hcp-editor-coordinate-tag .hcp-pet-name,
.hcp-editor-coordinate-tag .hcp-phone,
.hcp-editor-coordinate-tag .hcp-qr-box,
.hcp-editor-coordinate-tag .hcp-brand{
  right:auto!important;
  bottom:auto!important;
}