:root {
    --color-bg: #faf9f6;
    --color-surface: #ffffff;
    --color-border: #e2e0da;
    --color-text: #23241f;
    --color-muted: #6b6b63;
    --color-primary: #d4562a;
    --color-primary-dark: #b1441f;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

.cintillo-promo {
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 16px;
}

.badge-modo-test {
    background: repeating-linear-gradient(45deg, #7c2d12, #7c2d12 10px, #9a3412 10px, #9a3412 20px);
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 16px;
    letter-spacing: 0.02em;
}

header.site-header {
    padding: 24px 16px 8px;
    text-align: center;
}

header.site-header h1 {
    margin: 0 0 4px;
    font-size: 26px;
}

header.site-header p {
    margin: 0;
    color: var(--color-muted);
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}

/* Mobile-first: 2 columnas siempre visibles sin scroll (antes
   auto-fill/minmax(220px) colapsaba a 1 sola columna en cualquier pantalla
   angosta de celular, un feed vertical larguísimo) — escala a 3/4
   columnas cuando hay espacio real. */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}
@media (min-width: 640px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.plantilla-card {
    /* min-width:0 es necesario para que el <h3> truncado (white-space:nowrap
       + text-overflow:ellipsis) pueda de verdad angostarse — un grid item
       sin esto usa el ancho de contenido completo del texto como mínimo
       intrínseco, ignora el "1fr" de la columna, y desborda el grid entero
       (bug real encontrado probando el layout de 2 columnas: el título
       largo de una plantilla empujaba la segunda columna fuera de vista en
       vez de truncarse). */
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plantilla-thumb {
    background: #fafafa;
    border-radius: calc(var(--radius) - 4px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* El outline va acá, pegado al arte en sí (que puede no llenar todo el
   cuadrado si la plantilla tiene otra proporción) — no en .plantilla-thumb,
   que dejaría un borde alrededor de espacio vacío para diseños angostos o
   panorámicos. */
.plantilla-thumb svg {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 4px);
}

/* Truncado a 1 sola línea (con "…") — el nombre completo queda como
   tooltip nativo (`title`) para quien lo necesite. */
.plantilla-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plantilla-card .precio {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
}
.plantilla-card .precio .precio-desde-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Mismo criterio visual que .precio-tachado/.precio-descuento de
   comprar.css (tachado gris + destacado en rojo) — el precio "desde" del
   catálogo tiene que reflejar el mismo descuento vigente (material,
   categoría o tienda, el que sea mejor) que ya ve el cliente en el
   wizard, nunca un precio de lista que después resulta no ser el real. */
.plantilla-card .precio .precio-tachado {
    margin-right: 4px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--color-muted);
}
.plantilla-card .precio .precio-descuento {
    color: #b3261e;
    font-weight: 800;
}

/* Empuja el botón al fondo de la tarjeta sin importar cuánto texto haya
   arriba — junto con el grid, que ya estira todas las tarjetas de una fila
   a la misma altura, esto deja el botón siempre a la misma altura en toda
   la fila. */
.plantilla-card .btn-grande {
    margin-top: auto;
}

.plantilla-card .categoria {
    font-size: 11px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 14px;
}

.btn:hover { background: var(--color-primary-dark); }

.btn.disabled {
    background: #e2e0da;
    color: var(--color-muted);
    cursor: not-allowed;
    position: relative;
}

.tag-proximamente {
    display: block;
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 4px;
}

.empty-state {
    margin-top: 32px;
    text-align: center;
    color: var(--color-muted);
}

.empty-state a {
    color: var(--color-primary);
}