/* ==========================================================================
   VANYS STORE — catálogo de ejemplo
   Hoja aparte del tema a propósito: es la web de otra marca, con su propia
   tipografía y su propia paleta. Si compartiera el CSS del sitio, el ejemplo
   se vería como una página de Viviana en vez de como el catálogo de su
   clienta, que es justo lo que tiene que enseñar.
   ========================================================================== */
:root {
	--v-tinta:  #2b2226;
	--v-suave:  #fdf3f6;
	--v-linea:  #f0dfe5;
	--v-acento: #e07a9c;      /* el rosa de la marca */
	--v-rosa:   #ffeaf1;
	--v-crema:  #fff8f0;
	--v-gris:   #7d7176;
	--v-blanco: #fff;
	--v-radio:  14px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--v-blanco);
	color: var(--v-tinta);
	font: 400 16px/1.55 "Inter", -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

.vwrap { width: min(100% - 2.5rem, 1220px); margin-inline: auto; }

/* --- Aviso de que es una muestra ---------------------------------------- */
.vmuestra {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	padding: .55rem 1rem;
	background: #111;
	color: #f2efe9;
	font-size: .8125rem;
	text-align: center;
}

.vmuestra b { color: #fff; }

.vmuestra a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: #fc5409;
	font-weight: 700;
	text-decoration: none;
}

/* --- Cabecera ------------------------------------------------------------ */
.vcab {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--v-linea);
}

.vcab__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 0;
}

.vmarca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.vmarca img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.vmarca b { display: block; font-size: 1rem; letter-spacing: .01em; }

.vmarca i {
	display: block;
	font-style: normal;
	font-size: .75rem;
	color: var(--v-gris);
}

.vcarro-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.05rem;
	border: 1px solid var(--v-tinta);
	border-radius: 999px;
	background: none;
	color: var(--v-tinta);
	font-size: .875rem;
	font-weight: 600;
}

.vcarro-btn:hover { background: var(--v-tinta); color: var(--v-blanco); }

.vcarro-btn__n {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--v-acento);
	color: var(--v-blanco);
	font-style: normal;
	font-size: .6875rem;
	font-weight: 700;
}

/* --- Portada -------------------------------------------------------------- */
.vhero {
	padding: clamp(2.5rem, 7vw, 4.5rem) 0;
	background:
		linear-gradient(120deg, rgba(224, 122, 156, .82), rgba(43, 34, 38, .78)),
		url("../img/vanys/portada.webp") center/cover no-repeat;
	color: var(--v-blanco);
	text-align: center;
}

.vhero h1 {
	margin: 0;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(2rem, 5.4vw, 3.4rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: .01em;
}

.vhero h1 em { font-style: italic; color: var(--v-rosa); }

.vhero p {
	margin: .9rem auto 0;
	max-width: 46ch;
	font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
	color: rgba(255, 255, 255, .88);
}

/* --- Barra de buscar, orden y categorías --------------------------------- */
.vbarra {
	position: sticky;
	top: 60px;
	z-index: 20;
	padding: .9rem 0 .2rem;
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--v-linea);
}

.vbarra__in { display: flex; gap: .7rem; flex-wrap: wrap; }

.vbuscar {
	flex: 1 1 260px;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem .95rem;
	background: var(--v-suave);
	border-radius: 999px;
	color: var(--v-gris);
}

.vbuscar input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--v-tinta);
	outline: none;
}

#orden {
	padding: .6rem 1rem;
	border: 1px solid var(--v-linea);
	border-radius: 999px;
	background: var(--v-blanco);
	font: inherit;
	font-size: .875rem;
	color: var(--v-tinta);
}

.vcats {
	display: flex;
	gap: .4rem;
	margin-top: .8rem;
	padding-bottom: .7rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.vcats::-webkit-scrollbar { display: none; }

.vcat {
	flex: none;
	padding: .45rem .95rem;
	border: 1px solid var(--v-linea);
	border-radius: 999px;
	background: var(--v-blanco);
	color: var(--v-gris);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s;
}

.vcat--on { background: var(--v-tinta); border-color: var(--v-tinta); color: var(--v-blanco); }

/* --- La rejilla ----------------------------------------------------------- */
.vmain { padding: 1.4rem 0 clamp(3rem, 7vw, 5rem); }

.vcuenta { margin: 0 0 1.1rem; font-size: .8125rem; color: var(--v-gris); }
.vcuenta b { color: var(--v-tinta); }

.vrejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.1rem;
}

.vp {
	display: flex;
	flex-direction: column;
	background: var(--v-blanco);
	border: 1px solid var(--v-linea);
	border-radius: var(--v-radio);
	overflow: hidden;
	transition: transform .24s ease, box-shadow .24s ease;
}

.vp:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(43, 43, 43, .11); }

.vp__foto {
	display: block;
	padding: 0;
	border: 0;
	background: var(--v-crema);
	aspect-ratio: 1;
	overflow: hidden;
}

.vp__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vp:hover .vp__foto img { transform: scale(1.05); }

.vp__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: .9rem .95rem 1rem;
}

.vp__cat {
	align-self: flex-start;
	padding: .18rem .55rem;
	border-radius: 999px;
	background: var(--v-rosa);
	color: #a8456b;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vp h3 {
	margin: .5rem 0 .35rem;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	/* Dos renglones fijos: si el nombre es mas largo la tarjeta no crece y
	   la rejilla no baila. */
	min-height: 2.6em;
}

/* El precio lleva tipografia propia: es lo que mas se mira en un catalogo
   y con la del cuerpo se perdia entre el nombre y los botones. */
.vprecio {
	margin: 0 0 .8rem;
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--v-tinta);
}

.vprecio span { font-size: .58em; color: var(--v-gris); font-weight: 500; }

.vprecio--grande { font-size: 2.3rem; margin: .7rem 0 0; }

.vp__acciones { display: flex; gap: .4rem; margin-top: auto; }

.vbtn {
	flex: 1;
	padding: .55rem .8rem;
	border: 1px solid var(--v-tinta);
	border-radius: 999px;
	background: none;
	color: var(--v-tinta);
	font-size: .8125rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.vbtn:hover { background: var(--v-suave); }

.vbtn--solido { background: var(--v-tinta); border-color: var(--v-tinta); color: var(--v-blanco); }
.vbtn--solido:hover { background: var(--v-acento); border-color: var(--v-acento); }

.vbtn--ancho {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	padding: .8rem 1rem;
	font-size: .9375rem;
}

.vvacio { padding: 3rem 0; text-align: center; color: var(--v-gris); }

/* --- Pie ------------------------------------------------------------------ */
.vpie {
	padding: 2.5rem 0;
	background: var(--v-rosa);
	text-align: center;
}

.vpie b { display: block; font-size: 1.0625rem; }
.vpie span { display: block; margin-top: .2rem; font-size: .875rem; color: var(--v-gris); }
.vpie small { display: block; margin-top: 1rem; font-size: .75rem; color: var(--v-gris); }

/* --- Ventanas ------------------------------------------------------------- */
.vmodal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.25rem; }
.vmodal[hidden] { display: none; }

.vmodal__fondo {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(20, 18, 16, .55);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}

/* El boton de cerrar va fuera del flujo: si no, en la rejilla de la ficha
   ocupa la primera celda y empuja la foto y el texto de sitio. */
.vmodal__x {
	position: absolute;
	z-index: 3;
	top: .7rem;
	right: .7rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--v-tinta);
	box-shadow: 0 3px 12px rgba(43, 34, 38, .18);
}

.vmodal__x:hover { background: var(--v-rosa); }

/* --- Ficha del producto --------------------------------------------------
   Foto grande a la izquierda y los datos a la derecha, como en la referencia.
   Los tres botones van juntos abajo: agregar, compartir y contactar. */
.vficha {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	width: min(100%, 880px);
	max-height: 88vh;
	overflow: hidden;
	background: var(--v-blanco);
	border-radius: 20px;
	box-shadow: 0 24px 70px rgba(43, 34, 38, .3);
}

.vficha__foto { background: var(--v-crema); padding: 1.5rem; display: grid; place-items: center; }
.vficha__foto img { width: 100%; height: auto; border-radius: 12px; }

.vficha__txt {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.9rem;
	overflow-y: auto;
}

.vficha__cat {
	align-self: flex-start;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--v-tinta);
	color: var(--v-blanco);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.vficha__txt h2 {
	margin: .9rem 0 .5rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}

.vficha__txt > p { margin: 0; color: var(--v-gris); font-size: .9375rem; }

.vficha__pie { margin-top: auto; padding-top: 1.5rem; }
.vficha__fila { display: flex; gap: .5rem; margin-bottom: .55rem; }
.vficha__fila .vbtn--solido { flex: 1; }

.vbtn--icono { flex: 0 0 46px; padding: .55rem; }

/* Verde de WhatsApp: es el unico color que se reconoce sin leer */
.vbtn--wa { border-color: #25d366; color: #128c3e; }
.vbtn--wa:hover { background: #25d366; color: var(--v-blanco); }

.vficha__aviso {
	display: block;
	margin-top: .6rem;
	font-size: .8125rem;
	color: var(--v-acento);
	text-align: center;
}

.vficha__aviso[hidden] { display: none; }

/* --- El pedido ------------------------------------------------------------ */
.vmodal--lado { place-items: stretch; justify-content: flex-end; padding: 0; }

.vcarro {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, 400px);
	height: 100%;
	background: var(--v-blanco);
}

.vcarro__alto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--v-linea);
	font-size: 1.0625rem;
}

.vcarro__alto .vmodal__x { position: static; box-shadow: none; background: var(--v-suave); }

.vcarro__lista { flex: 1; overflow-y: auto; padding: .5rem 1.25rem; }

.vitem {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--v-linea);
}

.vitem img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.vitem__t { flex: 1; min-width: 0; }
.vitem__t b { display: block; font-size: .875rem; font-weight: 600; }
.vitem__t span { font-size: .8125rem; color: var(--v-gris); }

.vcant { display: flex; align-items: center; gap: .35rem; }

.vcant button {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--v-linea);
	border-radius: 50%;
	background: var(--v-blanco);
	font-size: .875rem;
	line-height: 1;
}

.vcant b { min-width: 1.4ch; text-align: center; font-size: .875rem; }

.vcarro__pie { padding: 1.1rem 1.25rem 1.4rem; border-top: 1px solid var(--v-linea); }

.vcarro__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 .9rem;
	font-size: .9375rem;
	color: var(--v-gris);
}

.vcarro__total b {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.75rem;
	color: var(--v-tinta);
}

.vcarro__pie small { display: block; margin-top: .7rem; font-size: .75rem; color: var(--v-gris); text-align: center; }

.vcarro__vacio { padding: 3rem 1rem; text-align: center; color: var(--v-gris); font-size: .9375rem; }

/* --- Pantallas chicas ----------------------------------------------------- */
@media (max-width: 1000px) {
	.vrejilla { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.vwrap { width: min(100% - 1.75rem, 1220px); }
	.vrejilla { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
	.vbarra { top: 56px; }
	.vcarro-btn span { display: none; }
	.vcarro-btn { padding: .55rem .7rem; }
	.vficha { grid-template-columns: 1fr; overflow-y: auto; }
	.vficha__foto { padding: 1rem; }
	.vficha__txt { padding: 1.3rem 1.2rem 1.6rem; }
	.vficha__txt h2 { font-size: 1.25rem; }
	.vprecio--grande { font-size: 1.9rem; }
	.vp h3 { font-size: .875rem; }
	.vprecio { font-size: 1.25rem; }
	.vp__acciones { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.vp, .vp__foto img, .vcat, .vbtn { transition: none; }
}