@charset "UTF-8";

/* Phase 0–1 base (producto / catálogo overrides) */
html body{background:var(--site-bg,#f6f1e8)!important;color:#344d3d!important;font-family:var(--demo-sans),"Outfit",system-ui,sans-serif!important;font-weight:400!important}
body h1,body h2{font-family:var(--demo-display),Fraunces,var(--demo-display),Fraunces,Georgia,serif!important;font-weight:400!important;letter-spacing:-.8px}
body .container,body .catalog{max-width:1280px!important;padding:32px!important}
body .store-header{background:#fffdf8!important;color:#344d3d!important}
body .store-header a{color:#344d3d}
body .store-header .store-search-row{padding-top:0}
body .store-header .cartActions .dark{color:#fff}
body .hero{background:#e7e9db!important;color:#384f38!important;border:1px solid #dce3d0;box-shadow:none!important;padding:34px!important;border-radius:10px!important}
body .hero h1{font-size:36px!important}
body .hero>p{font-size:13px;color:#8b957e}
body .title{font-family:var(--demo-display),Fraunces,Georgia,serif!important;font-size:42px!important;line-height:1.14!important;font-weight:400!important;letter-spacing:-1.2px}
body .price{color:#5e7250;font-weight:600!important}
body .muted,body .buy-note{font-weight:400!important;color:#8a9680;line-height:1.8}
body .desc{color:#738267;background:#f0f0e5;border:1px solid #e4e7d5;font-size:13px;padding:24px;border-radius:8px}
body .card{background:#fffefb!important;border:1px solid #e6e7dc!important;box-shadow:none!important;border-radius:9px!important}
body .galleryMain{background:#f0eee8;padding:26px;aspect-ratio:1/1;border-bottom:1px solid #ecebdf}
body .galleryMain img{mix-blend-mode:multiply}
body .thumbs{padding:16px;background:#fffdf7}
body .thumbs img{border-radius:5px;border:1px solid #e5e5d6}
body .thumbs button{border:1px solid #d9dfcd;border-radius:6px}
body .info{padding:5px 0}
body .badge{border-radius:4px;font-size:10px;font-weight:500;padding:8px 12px}
body .badgeReady{background:#e8ebdf;color:#7a8c68}
body .badgeProd{background:#ece6ef;color:#9684a1}
body .btn,body .btnDark,body .addBtn{background:var(--site-accent)!important;color:var(--site-accent-ink)!important;border:0!important;border-radius:6px!important;padding:14px 21px!important;font-size:12px!important;font-weight:600!important}
body .btn:hover,body .addBtn:hover{filter:brightness(.96)}
body .qtyWrap label{font-size:12px;font-weight:500!important;color:#88967d}
body .qtyWrap input{border:1px solid #dce2d1;border-radius:5px;font-weight:500;color:#6c7e5a}
body .buy-info{background:#f8f8f1;border:1px solid #e1e6d8;border-radius:7px;padding:16px 20px;color:#6a7f5c}
body .buy-info summary{font-size:12px;font-weight:550}
body .buy-info p{font-size:12px;line-height:1.85;color:#839276}
body .share-actions button,body .share-actions a{background:#f1ede5;border:1px solid #e2dcce;color:#8f7b64;font-size:10px;padding:11px 14px;border-radius:5px}
body .breadcrumbs{font-size:10px;color:#9ba48e;margin-bottom:24px}
body .breadcrumbs a{color:#819573;text-decoration:none}
body .info>p>a{font-size:12px;color:#728d66}
body .commerce-links{font-size:11px;color:#889a79;padding-top:35px}
body .filters{border:1px solid #e3e6d9;background:#fffdf8;border-radius:7px;padding:22px;gap:20px}
body .filters label{font-size:10px;letter-spacing:.4px;color:#8b987e;font-weight:600}
body .filters input,body .filters select{padding:11px;background:#f7f8f0;border:1px solid #e2e6d6;border-radius:5px;font-size:12px;color:#7b8d6a}
body .filters button{background:var(--site-secondary);border:0;border-radius:5px;color:#fff;padding:12px 22px;font-size:11px}
body .filters a{font-size:10px;color:#99a18c}
body .product-card{border:0;background:transparent;border-radius:8px}
body .product-card .photo{background:#f0eee8;border-radius:8px}
body .product-card .photo img{mix-blend-mode:multiply;padding:22px}
body .product-card .content{padding:19px 2px}
body .product-card h2{font:15px/1.4 'Segoe UI',sans-serif!important;color:#526549;letter-spacing:0}
body .product-card small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#a1a68f}
body .product-card .view{background:transparent;color:#849575;border:1px solid #dce2d0;font-size:10px;border-radius:5px;padding:12px}
body .product-card .price{font-size:19px}
body .old-price{font-size:12px;color:#a5ae96}
body .catalog h1{font-size:40px}
body .catalog>p{font-size:13px;color:#8e9a80}
body .cats a{background:transparent;border:1px solid #d9dfcc;color:#879575;font-size:11px;padding:10px 16px;border-radius:5px}
body .cats a.active{background:var(--site-secondary);color:#fff}
body .card .name{font-size:15px;font-weight:550;color:#627454}
body .card .meta{font-size:11px;font-weight:400;color:#94a080}
body .linkBtn{font-size:11px;border-radius:5px;background:#f4f1e8;color:#a09071;font-weight:500}
body .pad{padding:24px}
body .pad label{font-size:11px;color:#859573;font-weight:600}
body .pad input,body .pad textarea,body .pad select{border:1px solid #e0e4d4;border-radius:5px;background:#fffefb;color:#708560;font-size:13px}
body .card h2{padding:20px 24px;font-size:23px;border-bottom-color:#e7eadc}
body .item{font-size:13px;font-weight:500;color:#728466;border-color:#e7ebdb}
body .checkout-steps{font-size:10px;color:#9aa58b}
body .row{font-size:13px;font-weight:500}
body .notice{background:#e7eddf;color:#698458;border:1px solid #d8e2c9;font-size:12px}
body .studio-primary{background:var(--site-accent);color:var(--site-accent-ink)}
body .studio-hero h1{color:var(--site-secondary)}
body .studio-contact-banner h2{color:#f1efdf}
body .store-footer h2{font-family:'Segoe UI',sans-serif!important;letter-spacing:.6px}
@media(max-width:720px){
  body .container,body .catalog{padding:24px 20px!important}
  body .title{font-size:33px!important}
  body .galleryMain{padding:18px}
  body .hero h1{font-size:29px!important}
  body .catalog h1{font-size:33px}
  body .filters{display:grid;grid-template-columns:1fr;gap:14px}
  body .filters input,body .filters select{width:100%}
  body .card h2{font-size:22px;padding:18px}
  body .pad{padding:18px}
  body .share-actions{gap:7px}
  body .share-actions button,body .share-actions a{font-size:10px;padding:10px}
  body .product-card .photo img{padding:10px}
}

/* =========================================================
   Phase 2 — Estudio de tazas (personalizar.php)
   ========================================================= */

.studio-personalizar{
  max-width:72rem;
  margin:0 auto;
  padding:2rem 1rem 3.5rem;
}

.studio-personalizar-grid{
  display:grid;
  gap:2rem;
  align-items:start;
}

@media (min-width:1024px){
  .studio-personalizar-grid{
    grid-template-columns:1.05fr .95fr;
    gap:2rem;
  }
}

.studio-preview-card,
.studio-controls-card{
  background:var(--demo-surface,#fffdf8);
  border:1px solid var(--demo-border,#e3d9c9);
  border-radius:12px;
  box-shadow:none;
}

.studio-preview-card{
  padding:1rem 1rem 1.25rem;
}

@media (min-width:768px){
  .studio-preview-card{ padding:1.5rem; }
}

.studio-eyebrow-label{
  margin:0;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--demo-muted,#6b6458);
  font-weight:500;
}

.studio-personalizar-title{
  margin:.35rem 0 0;
  font-family:var(--demo-display),"Fraunces",Georgia,serif;
  font-size:clamp(1.75rem,3vw,1.95rem);
  font-weight:400;
  letter-spacing:-.04em;
  color:var(--demo-forest,#243c32);
  line-height:1.15;
}

.studio-preview-wrap{
  margin-top:1rem;
}

.studio-preview-area{
  position:relative;
  isolation:isolate;
  aspect-ratio:1 / 1;
  width:100%;
  max-width:32rem;
  margin:0 auto;
  overflow:hidden;
  border-radius:12px;
  background:var(--demo-bg,#f6f1e8);
  user-select:none;
}

.studio-preview-mockup{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
}

.studio-design-zone{
  position:absolute;
  left:22%;
  top:24%;
  width:38%;
  height:52%;
  overflow:hidden;
  border-radius:46% / 16%;
  z-index:1;
  pointer-events:none;
}

.studio-design-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  mix-blend-mode:multiply;
}

.studio-design-text{
  white-space:pre-line;

  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  width:88%;
  margin:0;
  text-align:center;
  font-weight:600;
  line-height:1.15;
  white-space:pre-wrap;
  word-break:break-word;
  cursor:grab;
  pointer-events:auto;
  z-index:10;
  text-shadow:0 1px 0 rgb(255 255 255 / .35);
}

.studio-design-text.is-dragging{
  cursor:grabbing;
}

.studio-preview-help{
  margin:1rem 0 0;
  font-size:.875rem;
  line-height:1.55;
  color:var(--demo-muted,#6b6458);
}

/* Controls panel */
.studio-controls-card{
  padding:1.25rem 1.25rem 1.5rem;
}

@media (min-width:768px){
  .studio-controls-card{ padding:1.5rem; }
}

.studio-product-line{
  margin:0;
  font-size:.875rem;
  color:var(--demo-muted,#6b6458);
}

.studio-currency{
  font-size:.75rem;
  opacity:.85;
}

.studio-form{
  margin-top:1.25rem;
}

.studio-field{
  margin-bottom:1.15rem;
}

.studio-label{
  display:block;
  margin-bottom:.45rem;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--demo-muted,#6b6458);
}

.studio-fondos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
}

.studio-fondo-card{
  display:block;
  padding:0;
  margin:0;
  border:1px solid var(--demo-line,#d8cdbb);
  border-radius:8px;
  overflow:hidden;
  background:var(--demo-surface,#fffdf8);
  cursor:pointer;
  text-align:center;
  font:inherit;
  color:inherit;
  transition:border-color .15s, box-shadow .15s;
}

.studio-fondo-card img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.studio-fondo-card span{
  display:block;
  padding:.3rem .25rem;
  font-size:10px;
  color:var(--demo-muted,#6b6458);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.studio-fondo-card.is-active{
  border-color:var(--demo-forest,#243c32);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--demo-forest,#243c32) 30%, transparent);
}

.studio-fondo-card:focus-visible{
  outline:3px solid #bf815d;
  outline-offset:2px;
}

.studio-input,
.studio-select{
  display:block;
  width:100%;
  height:2.75rem;
  padding:0 .85rem;
  border:1px solid var(--demo-line,#d8cdbb);
  border-radius:8px;
  background:var(--demo-surface,#fffdf8);
  color:var(--demo-fg,#1c1916);
  font:inherit;
  font-size:.875rem;
}

.studio-input:focus,
.studio-select:focus,
.studio-color:focus,
.studio-range:focus{
  outline:3px solid #bf815d;
  outline-offset:2px;
}

.studio-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

@media (max-width:520px){
  .studio-row-2{ grid-template-columns:1fr; }
  .studio-fondos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.studio-color{
  display:block;
  width:100%;
  height:2.75rem;
  padding:.2rem;
  border:1px solid var(--demo-line,#d8cdbb);
  border-radius:8px;
  background:var(--demo-surface,#fffdf8);
  cursor:pointer;
}

.studio-range{
  display:block;
  width:100%;
  accent-color:var(--site-accent,var(--demo-primary,#c45c38));
}

.studio-submit{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  margin-top:.5rem;
  padding:.95rem 1.25rem;
  border:0;
  border-radius:8px;
  background:var(--site-accent,var(--demo-primary,#c45c38));
  color:var(--site-accent-ink,var(--demo-primary-fg,#fffdf8));
  font:inherit;
  font-size:.875rem;
  font-weight:600;
  cursor:pointer;
}

.studio-submit:hover{
  filter:brightness(.96);
}

.studio-form-foot{
  margin:1rem 0 0;
  text-align:center;
  font-size:.75rem;
  color:var(--demo-muted,#6b6458);
}

.studio-form-foot a{
  color:var(--demo-fg,#1c1916);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:720px){
  .studio-personalizar{ padding:1.5rem 1rem 3rem; }
  .studio-personalizar-title{ font-size:1.65rem; }
}

/* ===== Phase 4 — Estudio móvil ===== */
@media (max-width:720px){
  .studio-personalizar{ padding:1.25rem 1rem 2.75rem!important; }
  .studio-personalizar-title{
    font-size:clamp(1.5rem,6vw,1.75rem)!important;
    letter-spacing:-.03em!important;
  }
  .studio-preview-card,
  .studio-controls-card{ border-radius:12px!important; }
  .studio-preview-card{ padding:1rem!important; }
  .studio-controls-card{ padding:1rem!important; }
  .studio-preview-area{ max-width:100%!important; border-radius:10px!important; }
  .studio-submit{
    min-height:48px;
    padding:1rem 1.25rem!important;
    font-size:.9rem!important;
  }
}

@media (max-width:480px){
  .studio-row-2{ grid-template-columns:1fr!important; }
  .studio-fondos{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:.5rem!important; }
  .studio-eyebrow-label{ font-size:10px!important; }
}


/* TAZA PRINT AREA 20cm x 9.5cm */
.studio-preview-area.is-taza-print{
  aspect-ratio:20 / 9.5;
  max-width:40rem;
  background:#1a1a1a;
}
.studio-preview-area.is-taza-print .studio-preview-mockup{
  display:none;
}
.studio-design-zone.is-taza-print{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  pointer-events:none;
  background:#fff;
}
.studio-design-zone.is-taza-print .studio-design-bg{
  object-fit:fill; /* estira / achica exacto al marco 20x9.5 */
  object-position:center;
  mix-blend-mode:normal;
}
.studio-preview-area.is-taza-print::after{
  content:"Área de impresión taza · 20 × 9,5 cm";
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
  pointer-events:none;
}
.studio-fondo-card img{
  aspect-ratio:20 / 9.5;
  object-fit:fill;
  width:100%;
  height:auto;
}