/* ===========================================================================
   Estilos de las paginas de producto de la tienda.
   ---------------------------------------------------------------------------
   Vive aparte porque ahora hay una pagina por producto: si el CSS estuviera
   dentro de cada HTML, cambiar el boton de comprar seria editar N archivos y
   uno se quedaria viejo. Aqui se cambia una vez.
   =========================================================================== */

/* ===========================================================================
   Página de producto — contraentrega.
   ---------------------------------------------------------------------------
   Esta página tiene UN solo trabajo: que la persona toque WhatsApp. No hay
   carrito, no hay pasarela, no hay registro. En Colombia el 60-70% prefiere
   pagar al recibir, y meter un formulario de tarjeta aquí mataría la venta.

   Por eso "Pagas cuando la recibes" va arriba del todo, incluso antes que el
   precio: es la objeción número uno de comprarle a una tienda desconocida, y
   se responde antes de que la piensen.

   Todo el texto habla de lo que la persona va a vivir —café listo en ocho
   minutos, la casa oliendo— y no de las especificaciones. Las especificaciones
   van abajo, para quien las busque.
   =========================================================================== */
.prod { max-width: 1000px; margin: 0 auto; padding: 0 24px 40px; }

.prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 820px) { .prod-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- fotos ---------- */
.prod-fotos { position: sticky; top: 90px; }
@media (max-width: 820px) { .prod-fotos { position: static; } }
.prod-principal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.prod-principal img { max-width: 100%; height: auto; display: block; }
.prod-mini { display: flex; gap: 10px; margin-top: 12px; }
.prod-mini button {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.prod-mini button.activa { border-color: var(--brand); }
.prod-mini img { width: 100%; height: auto; display: block; }

/* ---------- la promesa que va antes del precio ---------- */
.prod-sello {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #e7f6ee;
  color: #14804a;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 9px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.prod h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; margin: 0 0 12px; }
.prod-lead { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }

.prod-precio { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.prod-precio b { font-size: 2.2rem; letter-spacing: -0.02em; }
.prod-precio span { font-size: 0.95rem; color: var(--ink-soft); }
.prod-envio { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 22px; }

.prod-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #25d366;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  padding: 17px 24px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(37, 211, 102, 0.7);
  transition: transform 0.2s var(--ease-out-quint), filter 0.2s ease;
}
.prod-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.prod-cta:active { transform: scale(0.99); }
.prod-cta-nota { text-align: center; font-size: 0.84rem; color: var(--ink-soft); margin: 10px 0 26px; }

/* ---------- razones ---------- */
.prod-puntos { list-style: none; padding: 0; margin: 0 0 26px; }
.prod-puntos li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.96rem;
  line-height: 1.55;
}
.prod-puntos li:last-child { border-bottom: none; }
.prod-puntos b { color: var(--ink); }
.prod-puntos .ico { flex-shrink: 0; font-size: 1.2rem; line-height: 1.3; }

/* ---------- formulario, la segunda vía ---------- */
.prod-form { margin: -14px 0 26px; }
.prod-form summary {
  cursor: pointer;
  text-align: center;
  font-size: 0.9rem;
  color: var(--brand-dark);
  font-weight: 700;
  padding: 8px;
  list-style: none;
}
.prod-form summary::-webkit-details-marker { display: none; }
.prod-form summary:hover { text-decoration: underline; }
.prod-form[open] summary { margin-bottom: 14px; }

.campo-linea { margin-bottom: 12px; }
.campo-linea label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.campo-linea input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--bg);
  color: var(--ink);
}
.campo-linea input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.campo-linea input.malo { border-color: #dc2626; background: #fef2f2; }

.form-nota {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 10px 0 0;
  text-align: center;
}
.form-nota.error { color: #b91c1c; font-weight: 600; }
.form-nota.exito { color: #14804a; font-weight: 600; }

.form-listo {
  background: #e7f6ee;
  border: 1px solid #17a35c;
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
}
.form-listo b { display: block; color: #14804a; font-size: 1.05rem; margin-bottom: 5px; }
.form-listo p { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; }

/* ---------- ficha ---------- */
.prod-ficha { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 8px; }
.prod-ficha td { padding: 11px 0; border-bottom: 1px solid var(--border); }
.prod-ficha td:first-child { color: var(--ink-soft); width: 45%; }
.prod-ficha td:last-child { font-weight: 600; }

@media (max-width: 620px) {
  .prod { padding: 0 20px 30px; }
  .prod-principal { padding: 18px; min-height: 260px; }
  .prod-precio b { font-size: 1.9rem; }
}

/* ---------- migas y puente hacia el sistema ---------- */
/* Quien llega desde una publicacion cae directo en el producto sin pasar por
   la tienda: estas dos piezas son las unicas salidas que tiene. */
.migas {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.migas a { color: var(--brand); text-decoration: none; font-weight: 600; }
.migas a:hover { text-decoration: underline; }
.migas b { font-weight: 600; color: var(--ink); }
.migas span { margin: 0 6px; opacity: 0.5; }

.prod-puente {
  margin: 38px 0 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-align: center;
}
.prod-puente a { color: var(--brand); font-weight: 700; text-decoration: none; }
.prod-puente a:hover { text-decoration: underline; }