/* Ficha de plantilla /templates/<slug>/. Encima de /component/detail.css: la misma retícula de
   celdas; aquí sólo lo que la ficha tiene de propio (el bloque de compra, las capturas, la paleta). */

.tpl-lede { font-size: 16px; color: var(--fg); padding: 16px var(--pad); }

/* Captura y compra comparten fila, como el medio y las acciones de la ficha de componente. */
.tpl-ficha .media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.tpl-buy {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px var(--pad);
}
.tpl-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.tpl-price strong { font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--fg-strong); }
.tpl-price span { font-size: 13px; color: var(--muted); }
.tpl-actions { display: grid; gap: 8px; margin: 0; }
.tpl-actions .btn { width: 100%; background: var(--cell-alt); }
.tpl-actions .btn:hover { background: #e6e6e6; }
.tpl-actions .btn-primary { background: var(--fg-strong); color: #fff; }
.tpl-actions .btn-primary:hover { background: #222; color: #fff; }
.tpl-actions .btn[disabled] { opacity: 0.6; cursor: progress; }
.tpl-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.tpl-note a { color: inherit; }
.tpl-msg { font-size: 13px; color: var(--fg-strong); background: var(--cell-alt); border-radius: var(--r); padding: 10px 12px; margin: 0; }
.tpl-buy [hidden] { display: none !important; }
/* Con sesión iniciada no se ofrece iniciarla. */
html[data-auth="user"] .tpl-buy .when-anon { display: none; }

.tpl-swatches { display: flex; gap: 6px; margin-top: 8px; }
.tpl-swatches span { width: 28px; height: 28px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }

.tpl-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.42fr); gap: 10px; align-items: start; }
.tpl-shots figure { margin: 0; border-radius: 6px; overflow: hidden; background: var(--cell-alt); }
.tpl-shots img { display: block; width: 100%; height: auto; }
.tpl-shots .tpl-phone { border-radius: 14px; }

.tpl-mechanics .tpl-learn { color: var(--muted); }

@media (max-width: 900px) {
  .tpl-buy { grid-column: 1 / -1; }
  .tpl-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-shots .tpl-phone { max-width: 220px; }
}
@media (max-width: 560px) {
  .tpl-price strong { font-size: 34px; }
  .tpl-shots { grid-template-columns: minmax(0, 1fr); }
}