/* Valens Boutique — diseño propio de la tienda (19-Oct-2026, a partir del diseño de
   Claude Design). Solo esta tienda: publicar.js lo copia como /cliente.css.
   Va encima de la plantilla; los colores salen del tema (ficha) salvo el lila de la
   portada y el pie oscuro, que son de este diseño. */
:root{--v-lila-1:#F7F1FB;--v-lila-2:#EFE3F7;--v-noche:#2A1B33;--v-noche-txt:#E9DDF0}

/* Cabecera y portada en un mismo lila, como una sola pieza */
.nav{background:var(--v-lila-1);border-bottom-color:transparent}
.portada-collage .hero{background:linear-gradient(180deg,var(--v-lila-1) 0%,var(--v-lila-2) 100%)}
.btn-carrito{border:1px solid var(--t-principal);border-radius:999px;padding:6px 12px;display:inline-flex;
             align-items:center;gap:6px;color:var(--t-principal-hondo)}
.btn-carrito svg{width:20px;height:20px}
.btn-carrito::after{content:'Bolsa';font-family:var(--t-letra-texto);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.btn-carrito .pill{top:-7px;right:-7px}
.nav{grid-template-columns:56px 1fr auto;padding-right:14px}

/* Franja morada con las categorías */
.marquee{background:var(--t-principal);border:0;padding:12px 0}
.marquee span{font-family:var(--t-letra-texto);font-style:normal;font-weight:400;font-size:12px;letter-spacing:.24em;
              text-transform:uppercase;color:#fff;padding:0 22px}

/* Categorías: pastillas con borde morado */
.cat-btn{border-color:var(--t-principal);color:var(--t-principal-hondo);font-weight:400;font-size:14px;padding:10px 18px}
.cats-tip{color:var(--t-tinta-suave)}

/* Tarjetas: foto en arco y botón lleno */
.card .foto{border-radius:999px 999px 10px 10px}
.card .nom{min-height:0}
.btn-linea{background:var(--t-principal);border-color:var(--t-principal);color:#fff;text-transform:uppercase;
           letter-spacing:.08em;font-size:12px;padding:12px 6px}
.card:hover .btn-linea{background:var(--t-principal-hondo);border-color:var(--t-principal-hondo)}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding:0 18px 36px}

@media(min-width:700px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
}
@media(min-width:860px){
  .btn-carrito{padding:8px 18px}
  .btn-carrito::after{content:'Mi bolsa';font-size:14px;letter-spacing:.14em}
  .marquee{padding:16px 0}
  .marquee span{font-size:14px;letter-spacing:.2em;padding:0 28px}
  .cats{padding:0 72px 20px;gap:12px}
  .cats-tip{padding-left:72px;padding-right:72px}
  .cat-btn{font-size:15px;padding:10px 22px}
  #tallas-zona .tallas-fila{padding-left:72px;padding-right:72px}
  .grid{padding:0 72px 72px}
  .card .foto{border-radius:999px 999px 12px 12px}
  .card .txt{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:8px}
  .card .txt > :not(.nom):not(.pre){grid-column:1/-1}
  .card .nom{font-size:22px}
  .card .pre{font-size:16px;white-space:nowrap}
  .btn-linea{font-size:14px;letter-spacing:.1em;padding:12px}
}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Pie oscuro */
.pie{background:var(--v-noche);color:var(--v-noche-txt)}
.red:hover,.red:active{color:var(--v-noche)}

/* Vitrina (portada con los conjuntos recortados): fondo lila; las flores, más abajo. */
.portada-collage .hero.con-vitrina{background:linear-gradient(180deg,var(--v-lila-1) 0%,var(--v-lila-1) 30%,var(--v-lila-2) 100%)}
@media(max-width:859px){
  .conj{margin:0 2.2vw;max-width:28vw}
  .conj-3{max-width:33vw}
}

/* 🌸 Flores REALES (19-Oct): ramos de lavanda armados con una foto CC0 recortada y pulida
   (ver marca/flores-licencia.txt). Solo a los lados, apoyados en el piso
   (las de entre la ropa se quitaron: al usuario no le gustaron). */
.vitrina::before{content:'';position:absolute;inset:auto 0 0 0;z-index:0;pointer-events:none;height:100%;
  background:url('/marca/flores.webp') left -40px bottom 10px/auto 74% no-repeat,
             url('/marca/flores-der.webp') right -40px bottom 10px/auto 74% no-repeat,
             url('/marca/flores-chico-der.webp') left 9% bottom 10px/auto 50% no-repeat,
             url('/marca/flores-chico.webp') right 9% bottom 10px/auto 50% no-repeat}
@media(max-width:859px){
  .vitrina::before{height:96%;
    background:url('/marca/flores.webp') left -30px bottom 8px/auto 70% no-repeat,
               url('/marca/flores-der.webp') right -30px bottom 8px/auto 70% no-repeat}
}
/* El del centro manda: el vestido rosado es más ancho que alto y el tope de ancho lo encogía. */
@media(min-width:860px){
  .conj{max-width:24vw}
  .conj-3{max-width:31vw}
}
@media(max-width:859px){.conj{max-width:27vw;margin:0 1.4vw}.conj-3{max-width:38vw}}

/* 💜 Degradado bajo la firma hasta la franja (19-Oct, pedido del usuario: que no se vea un fondo
   pálido y estático). De blanco a morado, y el morado «respira» despacio: sube y baja un poco. */
/* El tramo de arriba es transparente en TODO el recorrido del movimiento: así no hay línea donde empieza. */
.vitrina{background:linear-gradient(180deg,rgba(239,227,248,0) 0%,rgba(239,227,248,0) 28%,#E4D1F3 42%,#C9A7E6 62%,#A574D0 84%,#8A4FBF 100%);
  background-size:100% 135%;background-position:50% 0%;animation:vitrinaRespira 9s ease-in-out infinite alternate}
.vitrina::after{display:none}
@keyframes vitrinaRespira{from{background-position:50% 0%}to{background-position:50% 100%}}
@media(prefers-reduced-motion:reduce){.vitrina{animation:none}}