/* pedido-custom.css — estilos de la feature, escopados a .pc.
 * Toma los colores del sitio vía variables con fallback: al integrar al kit,
 * mapear --pc-* a las variables reales del template (o dejarlas caer al
 * fallback si el kit no expone variables). */
.pc {
  --pc-bg: var(--white);
  --pc-ink: var(--black);
  --pc-muted: var(--gray);
  --pc-line: var(--gray-line);
  --pc-accent: var(--accent);
  --pc-accent-ink: #ffffff;
  max-width: 34rem; margin: 0 auto; padding: 1.5rem 1rem 3rem;
  color: var(--pc-ink);
}
.pc-titulo { font-size: 1.6rem; margin: 0 0 .3rem; }
.pc-desc { color: var(--pc-muted); margin: 0 0 1.4rem; }
.pc-precio { margin: -.9rem 0 1.4rem; font-size: 1rem; }
.pc-precio strong { font-size: 1.25rem; }
.pc-precio span { color: var(--pc-muted); font-size: .88rem; }
.pc-campo { margin-bottom: 1.2rem; }
.pc-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.pc-label small { color: var(--pc-muted); font-weight: 400; }
.pc-input {
  width: 100%; box-sizing: border-box;
  background: var(--pc-bg); color: var(--pc-ink);
  border: 1px solid var(--pc-line); border-radius: 10px;
  padding: .7rem .85rem; font: inherit; font-size: .95rem;
}
textarea.pc-input { min-height: 6rem; resize: vertical; }
.pc-input:focus { outline: 2px solid var(--pc-accent); border-color: transparent; }
.pc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-chip {
  background: var(--pc-bg); border: 1px solid var(--pc-line); color: var(--pc-ink);
  border-radius: 999px; padding: .5rem 1rem; font: inherit; font-size: .9rem;
  cursor: pointer; min-height: 44px;
}
.pc-chip[aria-pressed="true"] {
  background: var(--pc-accent); color: var(--pc-accent-ink);
  border-color: var(--pc-accent); font-weight: 700;
}
.pc-drop {
  border: 2px dashed var(--pc-line); border-radius: 12px;
  padding: 1.1rem; text-align: center; cursor: pointer;
  color: var(--pc-muted); font-size: .95rem; background: var(--pc-bg);
}
.pc-drop:hover, .pc-drop:focus-visible { border-color: var(--pc-accent); color: var(--pc-ink); }
.pc-mockup { text-align: center; margin-top: .9rem; }
.pc-mockup svg { width: min(220px, 65vw); height: auto; }
.pc-aviso {
  background: rgba(232, 184, 22, .12); border: 1px solid rgba(232, 184, 22, .5);
  border-radius: 10px; padding: .7rem .9rem; font-size: .85rem;
}
.pc-btn {
  width: 100%; background: var(--whatsapp); color: #06280f;
  border: none; border-radius: 12px; font: inherit; font-weight: 700;
  font-size: 1.02rem; padding: .9rem; min-height: 52px; cursor: pointer;
}
.pc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Sección con imagen (pedidoCustom.imagen): foto a la izquierda, formulario a la derecha */
.pc-con-imagen { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 2.5rem; align-items: start; max-width: 1000px; margin: 2rem auto 0; padding: 1.5rem 1rem; border-top: 1px solid var(--gray-line); }
.pc-con-imagen .pc { margin: 0; padding-top: .5rem; }
.pc-imagen { position: sticky; top: 90px; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-line); background: var(--gray-soft); }
.pc-imagen img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .pc-con-imagen { grid-template-columns: 1fr; gap: 1rem; } .pc-imagen { position: static; max-width: 420px; margin: 0 auto; } }