/* 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. */
.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}
}

/* 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}}

/* 🔢 Números claros (22-Oct, pedido del usuario: «el total sale con tipografía rara»).
   Cormorant Garamond trae números ANTIGUOS (suben y bajan de la línea: «$171.300» se
   lee mal). Totales, precios y montos van en la letra del texto, mismo morado; y en
   cualquier otro título los números quedan alineados. */
body{font-variant-numeric:lining-nums}
.tot-fila.grande,.compra .monto,.precio-g,.pg-num b,.ok-caja .ped{
  font-family:var(--t-letra-texto);font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}
.tot-fila.grande{font-size:21px;color:var(--t-principal-hondo)}
.tot-fila.grande span:first-child{font-weight:500}