/* Banner de la portada: lo usan la tienda y la vista previa del editor en el panel. */
/* --- Banners de portada: cualquier foto que se suba queda recortada a una
   franja ancha y prolija, en vez de mostrarse a su alto natural (que con una
   foto de producto normal puede terminar ocupando media pantalla). --- */
.banner-portada { display: block; width: 100%; aspect-ratio: 21 / 6; position: relative; }
.banner-portada picture { display: block; width: 100%; height: 100%; }
.banner-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Banner único de la portada (2026/10/03): el alto, el color y la alineación los elige el administrador. */
.banner-portada--alto-bajo { aspect-ratio: 21 / 4; }
.banner-portada--alto-medio { aspect-ratio: 21 / 6; }
.banner-portada--alto-alto { aspect-ratio: 21 / 9; }
.banner-portada--solo-texto { background: var(--banner-fondo, #cb1d6d); color: var(--banner-texto, #fff); aspect-ratio: auto; }
.banner-portada--solo-texto.banner-portada--alto-bajo { min-height: 120px; }
.banner-portada--solo-texto.banner-portada--alto-medio { min-height: 200px; }
.banner-portada--solo-texto.banner-portada--alto-alto { min-height: 320px; }
.banner-portada__texto { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 2rem; color: var(--banner-texto, #fff); }
.banner-portada--solo-texto .banner-portada__texto { min-height: inherit; justify-content: center; }
.banner-portada--con-imagen .banner-portada__texto { position: absolute; inset: 0; justify-content: center;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 70%); }
.banner-portada__texto--izquierda { align-items: flex-start; text-align: left; }
.banner-portada__texto--centro { align-items: center; text-align: center; }
.banner-portada__texto--derecha { align-items: flex-end; text-align: right; }
.banner-portada--con-imagen .banner-portada__texto--derecha { background: linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,0) 70%); }
.banner-portada--con-imagen .banner-portada__texto--centro { background: rgba(0,0,0,.3); }
.banner-portada__titulo { margin: 0; font-size: clamp(1.4rem, 4vw, 2.6rem); line-height: 1.1; color: inherit; }
.banner-portada__subtitulo { margin: 0; font-size: clamp(.95rem, 2vw, 1.25rem); color: inherit; }
.banner-portada__boton { display: inline-block; margin-top: .5rem; padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700;
  background: var(--banner-texto, #fff); color: var(--banner-fondo, #cb1d6d); }
.banner-portada--con-imagen .banner-portada__boton { color: #1c1728; }
.banner-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .banner-portada { aspect-ratio: 16 / 9; }
}