/* ============================================================
   Tienda estándar Clásica -- INTEGRACIÓN DEL PROTOTIPO APROBADO
   (2026-08-21, checkpoint 2). Fuente visual definitiva:
   docs/prototipos/tienda-clasica-codex/prototipo-tienda-secciones.css
   (categorías, destacados) + prototipo-tienda-campanas.css (banner de
   ofertas, novedades, colección editorial). Mismos valores exactos,
   selectores calificados con ".plantilla-clasica". Igual que
   css/tienda-clasica-base.css: las fotos del prototipo eran un recorte
   fijo de UNA sola imagen de referencia (background-image con
   posición calculada a mano por tarjeta) -- aquí cada tarjeta usa su
   propia foto real de producto con <img object-fit:cover>, para que
   cualquier proporción real se recorte bien sin deformarse, nunca la
   imagen de referencia.
   ============================================================ */

/* ---- Categorías + Productos destacados (prototipo-tienda-secciones.css) ---- */

.plantilla-clasica .categories-section,
.plantilla-clasica .products-section { padding-top: 38px; }

.plantilla-clasica .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 12px 16px; }
/* color explícito: css/tienda.css (pasada anterior) todavía trae
   "body.plantilla-clasica h1,h2,h3{color:var(--cl-tinta)}" -- mismo tono
   casi idéntico a var(--ink), pero se fija aquí para no depender de esa
   variable heredada. */
.plantilla-clasica .section-head h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; color: var(--ink); }
.plantilla-clasica .kicker { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

/* "Ver todas"/"Ver todos": enlace de acento en el prototipo -- aquí son
   <button> reales (disparan una función real: expandir categorías o
   limpiar el filtro del catálogo), con el mismo tratamiento visual. */
.plantilla-clasica .section-head > a,
.plantilla-clasica .section-head > button,
.plantilla-clasica .catalogo-estado button {
    display: inline-flex; align-items: center; gap: 2px;
    border: 0; background: none; padding: 0; font: inherit;
    color: var(--accent); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.plantilla-clasica .catalogo-estado { display: flex; align-items: center; gap: 14px; }
/* css/tienda.css (pasada anterior) ya trae "body.plantilla-clasica
   .estado-catalogo" con la misma especificidad -- se iguala aquí para
   que esta hoja (cargada después) gane, en vez de dejarlo a una
   coincidencia casual de orden. */
body.plantilla-clasica .estado-catalogo { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

.plantilla-clasica .category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.plantilla-clasica .category-card {
    display: block; width: 100%; padding: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--tema-categorias-radio, var(--tema-radio-tarjetas, 14px)); background: var(--tema-categorias-fondo-tarjeta, #fff);
    box-shadow: var(--tema-categorias-sombra, none);
    text-align: inherit; font: inherit; color: inherit; cursor: pointer; transition: .2s;
}
.plantilla-clasica .category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plantilla-clasica .cat-photo { position: relative; display: block; overflow: hidden; background: var(--cream); }
.plantilla-clasica .cat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plantilla-clasica .category-card strong { display: block; padding: 13px 10px; text-align: center; font-size: 15px; color: var(--tema-categorias-color-texto, inherit); }

.plantilla-clasica .products-section { margin-top: 16px; padding: 34px 16px 22px; border-radius: var(--radius); background: linear-gradient(120deg, #fff 0%, #fff7f1 100%); }
.plantilla-clasica .product-heading { align-items: center; }
.plantilla-clasica .product-heading > div > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.plantilla-clasica .filtros-categorias { display: none; }

.plantilla-clasica .product-grid { display: grid; grid-template-columns: repeat(var(--tema-catalogo-columnas, 5), 1fr); gap: 15px; }
.plantilla-clasica .product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--tema-catalogo-radio, var(--tema-radio-tarjetas, 13px)); background: var(--tema-catalogo-fondo-tarjeta, #fff); box-shadow: var(--tema-catalogo-sombra, 0 5px 18px #2b180b0b); transition: .2s; }
.plantilla-clasica .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plantilla-clasica .product-photo,
.plantilla-clasica .new-photo { position: relative; overflow: hidden; background: var(--cream); }
.plantilla-clasica .product-photo img,
.plantilla-clasica .new-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.plantilla-clasica .tag { position: absolute; top: 11px; left: 11px; z-index: 1; padding: 5px 8px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
.plantilla-clasica .tag.green { background: #3e8c3b; }

.plantilla-clasica .product-photo button,
.plantilla-clasica .new-photo button {
    position: absolute; top: 9px; right: 9px; z-index: 1;
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: #ffffffd9; color: var(--ink); cursor: pointer;
}
.plantilla-clasica .new-photo button { width: 30px; height: 30px; }
.plantilla-clasica .product-photo svg,
.plantilla-clasica .new-photo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.plantilla-clasica .product-info { padding: 13px 12px; }
.plantilla-clasica .product-info h3,
.plantilla-clasica .new-card h3 { margin: 0; font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink); }
.plantilla-clasica .condiciones { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.plantilla-clasica .price { margin: 8px 0 0; font-size: 18px; font-weight: 800; color: var(--tema-catalogo-color-precio, inherit); }
.plantilla-clasica .price del { margin-left: 5px; color: #9b928c; font-size: 12px; font-weight: 400; }
.plantilla-clasica .add {
    display: block; width: 100%; margin-top: 12px; padding: 11px; border: 0; border-radius: var(--tema-radio-controles, 6px);
    background: var(--accent); color: #fff; text-align: center; font-size: 14px; font-weight: 750; cursor: pointer;
}
.plantilla-clasica .add:disabled { background: #c9c2b4; cursor: not-allowed; }

@media (max-width: 800px) {
    .plantilla-clasica .category-grid { grid-template-columns: repeat(3, 1fr); }
    .plantilla-clasica .product-grid { grid-template-columns: repeat(3, 1fr); }
    .plantilla-clasica .product-card:nth-child(n+4) { display: none; }
}

@media (max-width: 700px) {
    .plantilla-clasica .categories-section,
    .plantilla-clasica .products-section { padding-top: 28px; }
    .plantilla-clasica .section-head { margin-inline: 2px; }
    .plantilla-clasica .section-head h2 { font-size: 23px; }
    .plantilla-clasica .section-head > a,
    .plantilla-clasica .section-head > button { font-size: 13px; }
    .plantilla-clasica .category-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 7px; }
    .plantilla-clasica .category-card { min-width: 150px; scroll-snap-align: start; }
    .plantilla-clasica .products-section { margin-inline: -14px; padding: 28px 14px 20px; border-radius: 18px; }
    .plantilla-clasica .product-heading > div > p:last-child { display: none; }
    .plantilla-clasica .product-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .plantilla-clasica .product-card { display: block !important; min-width: 235px; scroll-snap-align: start; }
    .plantilla-clasica .product-info h3 { font-size: 13px; }
}

/* Valor final del prototipo (su propia hoja termina con este bloque sin
   media query, así que gana sobre los valores de arriba en todos los
   anchos -- se reproduce igual aquí en vez de dejar una regla muerta). */
.plantilla-clasica .cat-photo { aspect-ratio: 1.55; }
.plantilla-clasica .product-photo { aspect-ratio: 1.55; }
.plantilla-clasica .product-info { padding: 11px; }
.plantilla-clasica .product-info h3 { height: 36px; }
.plantilla-clasica .add { margin-top: 9px; padding: 10px; }

/* ---- Banner de ofertas, Novedades, Colección editorial (prototipo-tienda-campanas.css) ---- */

.plantilla-clasica .promo { min-height: 190px; margin-top: 18px; display: grid; grid-template-columns: 48% 52%; overflow: hidden; border-radius: 18px; background: #27170f; color: #fff; }
.plantilla-clasica .promo-copy { padding: 30px 38px; background: radial-gradient(circle at 85% 50%, #603116 0, #27170f 62%); }
.plantilla-clasica .promo-copy .kicker { color: #ff6b2c; }
.plantilla-clasica .promo h2 { margin: 0; font-size: 31px; color: #fff; }
.plantilla-clasica .promo h2 strong { color: #ff6324; }
.plantilla-clasica .promo-copy > p:not(.kicker) { max-width: 420px; margin: 10px 0 18px; color: #e8dcd4; line-height: 1.45; }
.plantilla-clasica .promo-copy > a,
.plantilla-clasica .editorial-copy > a { display: inline-block; padding: 11px 19px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 750; }
.plantilla-clasica .promo-visual { position: relative; overflow: hidden; background: #3a2013; }
.plantilla-clasica .promo-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plantilla-clasica .promo-visual:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #27170f 0, transparent 30%); }
/* Mismo criterio final del prototipo aprobado: el círculo de descuento no
   se repite en el banner (ya aparece una vez en el hero) -- se deja el
   elemento real por si cambia el criterio, pero no se muestra. */
.plantilla-clasica .promo-visual > span { display: none; }

.plantilla-clasica .new-section { padding-top: 34px; }
.plantilla-clasica .new-head { align-items: center; }
.plantilla-clasica .filters { display: flex; flex-wrap: wrap; gap: 8px; }
.plantilla-clasica .filters button { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.plantilla-clasica .filters button.activo { border-color: var(--accent); color: var(--accent); }

.plantilla-clasica .new-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plantilla-clasica .new-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.plantilla-clasica .new-photo { aspect-ratio: 1.55; }
.plantilla-clasica .new-card > div:last-child { position: relative; padding: 13px 14px; }
.plantilla-clasica .new-card .price { margin: 6px 0 34px; font-size: 15px; font-weight: 800; }
.plantilla-clasica .mini-add {
    position: absolute; right: 12px; bottom: 12px; border: 0; padding: 8px 18px; border-radius: 5px;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.plantilla-clasica .mini-add:disabled { background: #c9c2b4; cursor: not-allowed; }

.plantilla-clasica .editorial { min-height: 185px; margin-top: 18px; display: grid; grid-template-columns: 47% 27% 26%; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.plantilla-clasica .editorial-photo { position: relative; overflow: hidden; background: var(--cream); }
.plantilla-clasica .editorial-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plantilla-clasica .editorial-copy { padding: 30px 25px; }
.plantilla-clasica .editorial-copy h2 { margin: 0; font-size: 28px; color: var(--ink); }
.plantilla-clasica .editorial-copy > p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.5; }
.plantilla-clasica .editorial-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 15px 15px 15px 0; }
.plantilla-clasica .editorial-items article,
.plantilla-clasica .editorial-items a { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: inherit; text-decoration: none; }
.plantilla-clasica .editorial-items span { position: relative; display: block; flex: 1; min-height: 95px; overflow: hidden; background: var(--cream); }
.plantilla-clasica .editorial-items span img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plantilla-clasica .editorial-items small,
.plantilla-clasica .editorial-items strong { padding: 2px 7px; font-size: 11px; }
.plantilla-clasica .editorial-items strong { padding-bottom: 7px; font-size: 12px; }

@media (max-width: 900px) {
    .plantilla-clasica .promo { grid-template-columns: 1fr; min-height: 410px; }
    .plantilla-clasica .promo-copy { position: relative; z-index: 1; }
    .plantilla-clasica .promo-visual { min-height: 220px; }
    .plantilla-clasica .new-head { flex-wrap: wrap; gap: 12px; }
    .plantilla-clasica .filters { order: 3; width: 100%; overflow-x: auto; }
    .plantilla-clasica .new-grid { grid-template-columns: repeat(2, 1fr); }
    .plantilla-clasica .editorial { grid-template-columns: 1fr 1fr; }
    .plantilla-clasica .editorial-photo { min-height: 220px; }
    .plantilla-clasica .editorial-items { grid-column: 1 / -1; padding: 12px; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .plantilla-clasica .promo { min-height: 460px; }
    .plantilla-clasica .promo-copy { padding: 27px 24px; }
    .plantilla-clasica .promo h2 { font-size: 27px; }
    .plantilla-clasica .new-grid { display: flex; gap: 12px; overflow-x: auto; }
    .plantilla-clasica .new-card { min-width: 270px; }
    .plantilla-clasica .editorial { grid-template-columns: 1fr; }
    .plantilla-clasica .editorial-copy { padding: 24px; }
    .plantilla-clasica .editorial-photo { min-height: 210px; }
    .plantilla-clasica .editorial-items { grid-column: auto; display: flex; overflow-x: auto; }
    .plantilla-clasica .editorial-items article,
    .plantilla-clasica .editorial-items a { min-width: 130px; }
    .plantilla-clasica .mini-add { position: static; display: block; margin-top: 10px; text-align: center; }
}