/* Vinos Argentinos – Experiencia. Luminoso, dorado y con cristal estilo iOS. */

.va-exp {
	--va-vino: #5b1a2b;
	--va-vino-claro: #8a2f45;
	--va-oro: #b08d57;
	--va-oro-claro: #e9d3a4;
	--va-oro-oscuro: #8a6a3b;
	--va-degradado-oro: linear-gradient(135deg, #e3c48a 0%, #c19a5b 45%, #95703b 100%);
	--va-crema: #fbf8f3;
	--va-rosa: #f5ebe8;
	--va-tinta: #1d1a17;
	--va-gris: #6b625a;
	--va-linea: rgba(176, 141, 87, .18);
	--va-cristal: rgba(255, 255, 255, .62);
	--va-cristal-borde: rgba(255, 255, 255, .85);
	--va-sombra: 0 1px 2px rgba(60, 40, 20, .04), 0 12px 40px rgba(90, 64, 30, .10);
	--va-sombra-alta: 0 2px 4px rgba(60, 40, 20, .05), 0 24px 64px rgba(90, 64, 30, .16);
	--va-desenfoque: blur(24px) saturate(180%);
	--va-radio: 28px;
	--va-radio-chico: 16px;
	--va-curva: cubic-bezier(.2, .8, .2, 1);
	/* Títulos con la fuente de la web (experiencia.js la toma del tema); Playfair Display si no la encuentra. */
	--va-serif: var(--va-fuente-web, "Playfair Display", Georgia, "Times New Roman", serif);
	--va-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

	font-family: var(--va-sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.7;
	color: var(--va-tinta);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.va-exp *,
.va-exp *::before,
.va-exp *::after { box-sizing: inherit; }

.va-exp a { color: var(--va-oro-oscuro); }

/* Fondo luminoso con brillos dorados suaves */
.va-caja {
	position: relative;
	margin: 0;
	max-width: none;
	padding: 16px 0 48px;
	background:
		radial-gradient(60% 40% at 0% 10%, rgba(233, 211, 164, .45) 0%, rgba(233, 211, 164, 0) 70%),
		radial-gradient(50% 35% at 100% 35%, rgba(245, 235, 232, .9) 0%, rgba(245, 235, 232, 0) 70%),
		radial-gradient(60% 40% at 10% 75%, rgba(233, 211, 164, .30) 0%, rgba(233, 211, 164, 0) 70%),
		linear-gradient(180deg, #fffdf9 0%, var(--va-crema) 100%);
}

/* Tipografía */
.va-sobretitulo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--va-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--va-oro-oscuro);
	margin: 0 0 14px;
}
.va-sobretitulo::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--va-degradado-oro);
}
.va-titulo {
	font-family: var(--va-serif);
	font-weight: 500;
	font-size: clamp(46px, 8vw, 104px);
	line-height: .98;
	letter-spacing: -.015em;
	margin: 0 0 20px;
	color: inherit;
}
.va-subtitulo {
	font-family: var(--va-serif);
	font-weight: 500;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 16px;
	color: inherit;
}
.va-bajada,
.va-lead {
	font-family: var(--va-serif);
	font-style: italic;
	font-size: clamp(20px, 2.3vw, 26px);
	line-height: 1.4;
	margin: 0;
	color: inherit;
	opacity: .8;
}
.va-texto h3 {
	font-family: var(--va-serif);
	font-weight: 600;
	font-size: 28px;
	margin: 32px 0 8px;
}
.va-texto p { margin: 0 0 1.1em; }
.va-texto p:last-child { margin-bottom: 0; }
.va-texto strong { font-weight: 600; }
.va-texto img { max-width: 100%; height: auto; border-radius: var(--va-radio-chico); }
.va-texto iframe {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 20px;
	box-shadow: var(--va-sombra);
}
.va-texto--capitular > p:first-of-type::first-letter {
	font-family: var(--va-serif);
	float: left;
	font-size: 5.2em;
	line-height: .8;
	padding: 6px 12px 0 0;
	color: var(--va-oro);
}

/* Cristal reutilizable */
.va-cristal,
.va-bienvenida,
.va-modulo,
.va-formulario,
.va-resenas,
.va-ingreso,
.va-tarjeta {
	background: var(--va-cristal);
	border: 1px solid var(--va-cristal-borde);
	box-shadow: var(--va-sombra), inset 0 1px 0 rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
}

/* Portada de la caja: una tarjeta grande y redondeada */
.va-portada {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 680px);
	margin: 0 16px;
	padding: 128px 32px 72px;
	border-radius: 36px;
	overflow: hidden;
	color: var(--va-tinta);
	background:
		radial-gradient(55% 70% at 85% 15%, rgba(227, 196, 138, .75) 0%, rgba(227, 196, 138, 0) 70%),
		radial-gradient(50% 60% at 10% 90%, rgba(232, 200, 196, .8) 0%, rgba(232, 200, 196, 0) 70%),
		radial-gradient(40% 50% at 45% 40%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(135deg, #fbf3e4 0%, #f6e7dc 100%);
	background-size: cover;
	background-position: center;
	box-shadow: var(--va-sombra-alta);
}
.va-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
	pointer-events: none;
}
.va-portada--imagen { color: #fff; }
.va-portada--imagen::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 18, 12, .70) 0%, rgba(30, 18, 12, .15) 55%, rgba(30, 18, 12, 0) 100%);
}
.va-portada__barra {
	position: absolute;
	z-index: 2;
	top: 24px;
	left: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.va-portada__texto {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}
.va-portada .va-titulo { color: var(--va-tinta); }
.va-portada--imagen .va-titulo { color: #fff; }
.va-portada--imagen .va-sobretitulo { color: var(--va-oro-claro); }
.va-portada--imagen .va-sobretitulo::before { background: var(--va-oro-claro); }
.va-volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 999px;
	color: var(--va-tinta) !important;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	transition: transform .3s var(--va-curva), background .3s;
}
.va-volver:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .8); }

/* Selector de idioma: píldora de cristal */
.va-idiomas {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .8);
	box-shadow: 0 6px 18px rgba(60, 40, 20, .10);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
}
.va-idiomas a {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 34px;
	padding: 0 10px;
	border-radius: 999px;
	font: 600 12px/1 var(--va-sans);
	letter-spacing: .08em;
	color: var(--va-tinta) !important;
	text-decoration: none !important;
	transition: background .3s var(--va-curva), color .3s;
}
.va-idiomas a:hover { background: rgba(255, 255, 255, .7); }
.va-idiomas a.va-activo {
	color: #fff !important;
	background: var(--va-degradado-oro);
	box-shadow: 0 4px 12px rgba(149, 112, 59, .35);
}
.va-ingreso .va-idiomas { float: right; margin: -8px -8px 8px 12px; background: rgba(176, 141, 87, .08); }

/* Video de portada: cubre toda la tarjeta, sin sonido y en loop */
.va-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}
.va-video--externo { overflow: hidden; container-type: size; }
.va-video--externo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Cubre la tarjeta como un video 16:9 recortado. */
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%);
	border: 0;
}
.va-portada--video::before { z-index: 1; }
.va-tarjeta__imagen .va-video { border-radius: inherit; }

/* Índice de módulos: una píldora de cristal que flota */
.va-indice {
	position: sticky;
	top: 16px;
	z-index: 20;
	display: flex;
	justify-content: center;
	padding: 0 16px;
	margin: -30px 0 0;
	pointer-events: none;
}
.admin-bar .va-indice { top: 48px; }
.va-indice__pildora {
	display: flex;
	gap: 4px;
	max-width: 100%;
	padding: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 10px 30px rgba(90, 64, 30, .14), inset 0 1px 0 #fff;
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
	overflow-x: auto;
	scrollbar-width: none;
	pointer-events: auto;
}
.va-indice__pildora::-webkit-scrollbar { display: none; }
.va-indice a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	color: var(--va-tinta) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .35s var(--va-curva), color .35s, box-shadow .35s;
}
.va-indice a span {
	font-size: 11px;
	font-weight: 600;
	color: var(--va-oro);
	transition: color .35s;
}
.va-indice a:hover { background: rgba(176, 141, 87, .12); }
.va-indice a.va-activo {
	color: #fff !important;
	background: var(--va-degradado-oro);
	box-shadow: 0 6px 16px rgba(149, 112, 59, .35);
}
.va-indice a.va-activo span { color: rgba(255, 255, 255, .85); }

/* Secciones */
.va-seccion {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 24px;
}
.va-seccion--angosta { max-width: 820px; }

.va-modulo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	max-width: 1132px;
	margin: 40px auto 0;
	padding: 64px;
	border-radius: 36px;
	scroll-margin-top: 96px;
}
.va-modulo__cabecera { position: relative; }
.va-numero {
	display: block;
	font-family: var(--va-serif);
	font-size: 96px;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 12px;
	background: var(--va-degradado-oro);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: .6;
}

/* Módulos con tono propio */
.va-modulo--rosa {
	grid-template-columns: 1fr;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(232, 200, 196, .55) 0%, rgba(232, 200, 196, 0) 70%),
		rgba(255, 250, 248, .7);
}
.va-modulo--rosa .va-modulo__cabecera { max-width: 640px; }
.va-modulo--crema {
	background:
		radial-gradient(60% 80% at 0% 100%, rgba(233, 211, 164, .5) 0%, rgba(233, 211, 164, 0) 70%),
		rgba(255, 252, 245, .72);
}

/* Guía de cata: un recorrido deslizable (Vista, Nariz, Boca y Tu nota), pensado primero para el celular. */
.va-cata {
	--va-copa: #8b1a2e;
	position: relative;
	width: 100%;
	max-width: 560px;
	min-width: 0;
}
.va-cata button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font: inherit;
	color: var(--va-tinta);
	background: none;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.va-cata button:focus-visible,
.va-cata input:focus-visible,
.va-cata summary:focus-visible { outline: 2px solid var(--va-oro); outline-offset: 3px; }
.va-cata__etiqueta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 20px 0 10px;
	font: 600 12px/1.2 var(--va-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--va-tinta);
}
.va-cata__etiqueta em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--va-oro-oscuro); }
.va-cata > .va-cata__etiqueta { margin-top: 0; }

/* Vinos de la caja */
.va-cata__vinos { display: flex; gap: 8px; margin: 0 -20px 18px; padding: 4px 20px; overflow-x: auto; scrollbar-width: none; }
.va-cata__vinos::-webkit-scrollbar { display: none; }
.va-cata .va-cata__vino {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 8px;
	border-radius: 999px;
	background: var(--va-cristal);
	box-shadow: var(--va-sombra), inset 0 0 0 1px var(--va-cristal-borde);
	font: 500 14px/1.25 var(--va-sans);
	text-align: left;
	transition: transform .3s var(--va-curva), box-shadow .3s var(--va-curva);
}
.va-cata__vino small { display: block; font-size: 11px; font-weight: 400; color: var(--va-gris); }
.va-cata__vino i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--va-vino); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); transition: background .6s; }
.va-cata .va-cata__vino[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--va-oro), var(--va-sombra); }
.va-cata__vino[aria-pressed="true"] i { background: var(--va-copa); }
.va-cata .va-cata__vino:active { transform: scale(.97); }

/* Pestañas con píldora dorada */
.va-cata__pasos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	box-shadow: var(--va-sombra), inset 0 0 0 1px var(--va-cristal-borde);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
}
.va-cata .va-cata__pasos button {
	position: relative;
	padding: 10px 2px;
	border-radius: 999px;
	font: 600 12px/1 var(--va-sans);
	color: var(--va-gris);
	transition: color .3s;
}
.va-cata .va-cata__pasos button[aria-selected="true"] { color: #fff; }
.va-cata__pasos button span { position: relative; z-index: 1; }
.va-cata__pildora {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc((100% - 20px) / 4);
	border-radius: 999px;
	background: var(--va-degradado-oro);
	box-shadow: 0 6px 16px rgba(149, 112, 59, .35);
	transition: transform .45s var(--va-curva);
}

/* Paneles deslizables */
.va-cata__pista {
	display: flex;
	margin: 14px -20px 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	align-items: flex-start;
	transition: height .45s var(--va-curva);
}
.va-cata__pista::-webkit-scrollbar { display: none; }
.va-cata__panel { flex: 0 0 100%; min-width: 0; padding: 4px 20px 12px; scroll-snap-align: center; }
.va-cata__tarjeta {
	position: relative;
	padding: 22px 20px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .84);
	box-shadow: var(--va-sombra), inset 0 0 0 1px var(--va-cristal-borde);
}
.va-cata__tarjeta h3 { font-family: var(--va-serif); font-weight: 500; font-size: 32px; line-height: 1.1; margin: 2px 0 6px; color: var(--va-tinta); }
.va-cata__ins { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--va-gris); }

/* Copa */
.va-cata__escena { display: grid; justify-items: center; padding: 4px 0 0; }
.va-cata .va-cata__copa { display: block; width: 132px; padding: 0; filter: drop-shadow(0 18px 22px rgba(90, 30, 40, .18)); }
.va-cata__copa svg { display: block; width: 100%; height: auto; overflow: visible; }
.va-cata__liquido { fill: var(--va-copa); transition: fill .8s var(--va-curva); }
.va-cata__ola { animation: va-cata-ola 4s linear infinite; }
.va-cata__copa.va-girando .va-cata__remolino { animation: va-cata-girar 1.4s var(--va-curva); transform-origin: 60px 70px; }
@keyframes va-cata-ola { to { transform: translateX(-60px); } }
@keyframes va-cata-girar {
	25% { transform: rotate(-9deg) translateX(-3px); }
	55% { transform: rotate(8deg) translateX(3px); }
	80% { transform: rotate(-3deg); }
}
.va-cata__toque { margin: 4px 0 0; font-size: 12px; color: var(--va-gris); }

.va-cata__colores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.va-cata .va-cata__color { display: grid; justify-items: center; gap: 4px; padding: 0; font: 500 12px/1.25 var(--va-sans); text-align: center; }
.va-cata__color i {
	width: 100%;
	max-width: 64px;
	aspect-ratio: 1;
	margin-bottom: 2px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--c) 0 45%, color-mix(in srgb, var(--c) 55%, #fff) 72%, rgba(255, 255, 255, .9) 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), var(--va-sombra);
	transition: transform .35s var(--va-curva), box-shadow .35s var(--va-curva);
}
.va-cata__color[aria-pressed="true"] i { transform: scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--va-oro), var(--va-sombra); }
.va-cata__color small { font-size: 11px; font-weight: 400; color: var(--va-gris); }

.va-cata__segmento { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 14px; background: rgba(176, 141, 87, .12); }
.va-cata .va-cata__segmento button { padding: 10px 6px; border-radius: 11px; font: 500 13px/1.2 var(--va-sans); transition: background .3s, box-shadow .3s; }
.va-cata .va-cata__segmento button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 8px rgba(90, 64, 30, .14); }
.va-cata__ayuda { min-height: 2.6em; margin: 8px 0 0; font-size: 13px; color: var(--va-gris); }

.va-cata__como { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--va-linea); }
.va-cata__como summary { display: flex; justify-content: space-between; list-style: none; cursor: pointer; font: 600 13px/1.4 var(--va-sans); color: var(--va-oro-oscuro); }
.va-cata__como summary::-webkit-details-marker { display: none; }
.va-cata__como summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform .3s var(--va-curva); }
.va-cata__como[open] summary::after { transform: rotate(45deg); }
.va-cata__como .va-texto { margin-top: 10px; font-size: 15px; }

/* Aromas */
.va-cata__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.va-cata .va-cata__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	box-shadow: inset 0 0 0 1px var(--va-linea);
	font: 500 14px/1 var(--va-sans);
	transition: transform .25s var(--va-curva), background .3s, box-shadow .3s;
}
.va-cata__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.va-cata .va-cata__chip[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c), 0 6px 16px rgba(90, 64, 30, .12); }
.va-cata .va-cata__chip:active { transform: scale(.95); }

/* Boca */
.va-cata__barra { display: grid; gap: 4px; margin-top: 16px; }
.va-cata__barra label { display: flex; justify-content: space-between; font: 600 14px/1.2 var(--va-sans); }
.va-cata__barra output { font-weight: 500; color: var(--va-oro-oscuro); }
.va-cata__extremos { display: flex; justify-content: space-between; font-size: 11px; color: var(--va-gris); }
.va-cata input[type="range"] {
	--p: 50%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.va-cata input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #c19a5b var(--p), rgba(176, 141, 87, .18) var(--p)); }
.va-cata input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #c19a5b var(--p), rgba(176, 141, 87, .18) var(--p)); }
.va-cata input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .18); }
.va-cata input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }

.va-cata__persistencia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 20px; padding: 14px; border-radius: 20px; background: rgba(176, 141, 87, .08); }
.va-cata .va-cata__reloj {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--va-sombra);
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	transition: transform .2s;
}
.va-cata .va-cata__reloj.va-activo { transform: scale(.95); }
.va-cata__reloj svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.va-cata__aro { fill: none; stroke: rgba(176, 141, 87, .18); stroke-width: 5; }
.va-cata__avance { fill: none; stroke: url(#va-cata-oro); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 270.2; stroke-dashoffset: 270.2; transition: stroke-dashoffset .1s linear; }
.va-cata__reloj b { position: relative; font: 500 28px/1 var(--va-serif); font-variant-numeric: tabular-nums; }
.va-cata__reloj b small { font: 500 12px var(--va-sans); color: var(--va-gris); }
.va-cata__persistencia p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--va-gris); }
.va-cata__persistencia strong { display: block; margin-bottom: 2px; font: 600 15px/1.3 var(--va-sans); color: var(--va-tinta); }

/* Tu nota */
.va-cata__nota { overflow: hidden; }
.va-cata__nota::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--va-copa) 35%, transparent), transparent 70%);
	pointer-events: none;
}
.va-cata__nota-cab { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.va-cata__nota-cab i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--va-copa); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), var(--va-sombra); transition: background .8s; }
.va-cata__nota-cab h3 { font-size: 24px; margin: 0; }
.va-cata__nota-cab p { margin: 0; font-size: 12px; color: var(--va-gris); }
.va-cata__frase { position: relative; margin: 0 0 10px; font: italic 400 19px/1.45 var(--va-serif); }
.va-cata__nota .va-cata__chip { cursor: default; padding: 6px 11px; font-size: 13px; }
.va-cata__radar { display: block; width: 100%; max-width: 300px; margin: 8px auto 0; }
.va-cata__radar .va-red { fill: none; stroke: rgba(176, 141, 87, .25); }
.va-cata__radar .va-forma { fill: color-mix(in srgb, var(--va-copa) 22%, transparent); stroke: var(--va-copa); stroke-width: 2; stroke-linejoin: round; }
.va-cata__radar circle { fill: var(--va-copa); }
.va-cata__radar text { font: 600 10px var(--va-sans); letter-spacing: .06em; text-transform: uppercase; fill: var(--va-gris); }
.va-cata__acciones { display: grid; gap: 10px; margin-top: 16px; }
.va-cata .va-cata__boton { padding: 15px 16px; font-size: 14px; line-height: 1.25; text-align: center; }
.va-cata__boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.va-cata .va-cata__boton--cristal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--va-linea);
	font: 600 14px/1 var(--va-sans);
}

.va-cata__navegar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.va-cata .va-cata__navegar button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .84);
	box-shadow: var(--va-sombra);
}
.va-cata .va-cata__navegar button:disabled { opacity: .35; cursor: default; }
.va-cata__navegar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.va-cata__puntos { display: flex; gap: 6px; }
.va-cata__puntos i { width: 6px; height: 6px; border-radius: 6px; background: rgba(176, 141, 87, .3); transition: width .4s var(--va-curva), background .4s; }
.va-cata__puntos i.va-activo { width: 20px; background: var(--va-oro); }

.va-cata__toast {
	position: fixed;
	z-index: 50;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 11px 18px;
	border-radius: 999px;
	background: rgba(29, 26, 23, .86);
	color: #fff;
	font-size: 14px;
	text-align: center;
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
	opacity: 0;
	transform: translate(-50%, 20px);
	pointer-events: none;
	transition: opacity .35s var(--va-curva), transform .35s var(--va-curva);
}
.va-cata__toast.va-ver { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
	.va-cata__ola,
	.va-cata__copa.va-girando .va-cata__remolino { animation: none; }
}
.va-paso__numero {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--va-oro);
}

/* Filosofía de Bodega: una ficha por bodega */
.va-bodegas {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.va-bodega {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 26px;
	background: rgba(255, 255, 255, .8);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 6px 22px rgba(90, 64, 30, .08);
	transition: transform .5s var(--va-curva), box-shadow .5s var(--va-curva);
}
.va-bodega:hover { transform: translateY(-4px); box-shadow: var(--va-sombra-alta); }
.va-bodega__media {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 8px 8px 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--va-crema);
}
.va-bodega__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.va-bodega__texto { padding: 22px 24px 26px; }
.va-bodega__texto .va-sobretitulo { margin-bottom: 8px; }
.va-bodega h3 {
	font-family: var(--va-serif);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.1;
	margin: 0 0 12px;
}
.va-bodega__vinos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.va-bodega__vinos li {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(176, 141, 87, .12);
	color: var(--va-oro-oscuro);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
.va-bodega .va-texto { font-size: 16px; }

/* Historia del vino: video con Plyr y una ficha por región */
.va-historia {
	background:
		radial-gradient(70% 70% at 100% 0%, rgba(233, 211, 164, .5) 0%, rgba(233, 211, 164, 0) 70%),
		radial-gradient(50% 60% at 0% 100%, rgba(245, 235, 232, .8) 0%, rgba(245, 235, 232, 0) 70%),
		rgba(255, 253, 249, .74);
	align-items: center;
}
.va-reproductor {
	--plyr-color-main: #b08d57;
	--plyr-video-background: #1d1a17;
	--plyr-control-radius: 999px;
	--plyr-control-icon-size: 17px;
	--plyr-range-thumb-height: 14px;
	--plyr-range-track-height: 4px;
	--plyr-video-controls-background: linear-gradient(rgba(29, 26, 23, 0), rgba(29, 26, 23, .72));
	--plyr-font-family: var(--va-sans);
	position: relative;
	padding: 8px;
	border-radius: 30px;
	background: rgba(255, 255, 255, .7);
	border: 1px solid rgba(255, 255, 255, .95);
	box-shadow: var(--va-sombra-alta);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
}
.va-reproductor .plyr,
.va-reproductor > .va-plyr {
	overflow: hidden;
	border-radius: 22px;
	aspect-ratio: 16 / 9;
}
.va-reproductor > .va-plyr { width: 100%; background: #1d1a17; }
.va-reproductor > .va-plyr iframe { display: block; width: 100%; height: 100%; border: 0; }
.va-reproductor .plyr__control--overlaid {
	padding: 22px;
	background: rgba(255, 255, 255, .28);
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
}
.va-reproductor .plyr__control--overlaid:hover,
.va-reproductor .plyr__control--overlaid:focus-visible { background: var(--va-degradado-oro); }
.va-reproductor .plyr__control--overlaid svg { width: 22px; height: 22px; }
.va-reproductor .plyr__poster { background-size: cover; }
.va-exp .va-reproductor button.plyr__control {
	min-height: 0;
	margin: 0;
	border: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}
.va-exp .va-reproductor button.plyr__control--overlaid {
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.va-exp .va-reproductor button.plyr__control:not(.plyr__control--overlaid) { background: transparent; color: #fff; padding: 7px; }
.va-exp .va-reproductor button.plyr__control:not(.plyr__control--overlaid):hover { background: var(--va-oro); }
.va-regiones { margin-top: 8px; }
.va-region .va-bodega__texto { padding-top: 26px; }
.va-region h3 { margin-bottom: 10px; }
.va-region__dato {
	display: inline-block;
	margin: 0 0 16px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--va-degradado-oro);
	box-shadow: 0 6px 16px rgba(149, 112, 59, .3);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.3;
}

/* Bienvenida y vinos */
.va-bienvenida {
	margin-top: 64px;
	padding: 56px;
	border-radius: 36px;
	font-size: 19px;
}
.va-vinos {
	list-style: none;
	counter-reset: vino;
	display: grid;
	gap: 12px;
	margin: 40px 0 0;
	padding: 0;
}
.va-vinos li {
	counter-increment: vino;
	display: grid;
	grid-template-columns: 52px 1fr;
	column-gap: 18px;
	align-items: center;
	padding: 16px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 4px 16px rgba(90, 64, 30, .06);
	transition: transform .4s var(--va-curva), box-shadow .4s var(--va-curva);
}
.va-vinos li:hover { transform: translateY(-2px); box-shadow: var(--va-sombra); }
.va-vinos li::before {
	content: counter(vino, decimal-leading-zero);
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--va-degradado-oro);
	box-shadow: 0 6px 14px rgba(149, 112, 59, .3), inset 0 1px 0 rgba(255, 255, 255, .45);
	font-family: var(--va-sans);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}
.va-vinos strong {
	font-family: var(--va-serif);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.15;
}
.va-vinos span { font-size: 14px; color: var(--va-gris); }

/* Mapa */
.va-mapa { grid-template-columns: 1fr; }
.va-mapa__lienzo {
	position: relative;
	height: 580px;
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(circle at 50% 45%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(circle at 50% 50%, #eef4fa 0%, #f6efe6 70%, #f3e6dc 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
	cursor: grab;
}
.va-mapa__lienzo:active { cursor: grabbing; }
.va-mapa__lienzo--sin-3d { display: none; }

/* Marca de cada país en el globo: punto verde con un aro que se abre y se cierra despacio. */
.va-globo-marca {
	--va-verde: #2fbf71;
	position: relative;
	width: 0;
	height: 0;
	pointer-events: auto;
	cursor: default;
}
.va-globo-punto,
.va-globo-aro {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.va-globo-punto {
	width: 10px;
	height: 10px;
	background: var(--va-verde);
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 12px rgba(47, 191, 113, .7);
}
.va-globo-aro {
	width: 22px;
	height: 22px;
	border: 1px solid var(--va-verde);
	animation: va-respirar 3.2s ease-in-out infinite;
}
@keyframes va-respirar {
	0%, 100% { width: 14px; height: 14px; opacity: .9; }
	50% { width: 30px; height: 30px; opacity: .35; }
}
.va-globo-etiqueta {
	position: absolute;
	left: 18px;
	top: 0;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 14px 8px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .42);
	border: 1px solid rgba(255, 255, 255, .65);
	box-shadow: 0 8px 24px rgba(15, 30, 50, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	backdrop-filter: blur(16px) saturate(170%);
	white-space: nowrap;
	font-family: var(--va-sans);
	line-height: 1.25;
}
.va-globo-etiqueta strong {
	font-family: var(--va-serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--va-tinta);
}
.va-globo-etiqueta em { font-style: normal; color: var(--va-gris); }
.va-globo-etiqueta small {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #4a4038;
}
.va-mapa__columnas {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px;
	align-items: start;
}
.va-mapa h3,
.va-ingreso h3 {
	font-family: var(--va-serif);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.1;
	margin: 0 0 20px;
}

/* Formularios estilo iOS */
.va-formulario,
.va-resenas {
	padding: 32px;
	border-radius: 28px;
	background: rgba(255, 255, 255, .72);
}
.va-formulario label,
.va-ingreso label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--va-gris);
	margin-bottom: 16px;
}
.va-formulario input[type="text"],
.va-formulario select,
.va-formulario textarea,
.va-ingreso input[type="text"],
.va-ingreso input[type="password"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 14px 16px;
	font: 400 16px/1.4 var(--va-sans);
	color: var(--va-tinta);
	background-color: rgba(255, 255, 255, .92);
	border: 1px solid rgba(176, 141, 87, .22);
	border-radius: 14px;
	box-shadow: inset 0 1px 2px rgba(60, 40, 20, .04);
	transition: border-color .25s, box-shadow .25s, background-color .25s;
	-webkit-appearance: none;
	appearance: none;
}
.va-formulario select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a6a3b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}
.va-formulario textarea { resize: vertical; min-height: 120px; }
.va-formulario input:focus,
.va-formulario select:focus,
.va-formulario textarea:focus,
.va-ingreso input:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--va-oro);
	box-shadow: 0 0 0 4px rgba(176, 141, 87, .18);
}
.va-estrellas {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.va-estrellas legend {
	width: 100%;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--va-gris);
	margin-bottom: 4px;
}
.va-estrellas input { position: absolute; opacity: 0; pointer-events: none; }
.va-estrellas label {
	font-size: 32px;
	line-height: 1.2;
	margin: 0 4px 0 0;
	color: rgba(176, 141, 87, .25);
	cursor: pointer;
	transition: transform .25s var(--va-curva), color .2s;
}
.va-estrellas label:hover { transform: scale(1.15); }
.va-estrellas input:checked ~ label,
.va-estrellas label:hover,
.va-estrellas label:hover ~ label { color: var(--va-oro); }
.va-estrellas input:focus-visible + label { outline: 2px solid var(--va-oro); border-radius: 6px; }

/* Botón: píldora dorada */
.va-boton,
.va-ingreso input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 30px;
	font: 600 15px/1 var(--va-sans);
	letter-spacing: .01em;
	text-transform: none;
	color: #fff !important;
	background: var(--va-degradado-oro);
	border: 0;
	border-radius: 999px;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(149, 112, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
	transition: transform .3s var(--va-curva), box-shadow .3s var(--va-curva), filter .3s;
}
.va-boton:hover,
.va-ingreso input[type="submit"]:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}
.va-boton:active,
.va-ingreso input[type="submit"]:active { transform: scale(.97); }

.va-aviso {
	padding: 12px 16px;
	border-radius: 14px;
	background: rgba(47, 191, 113, .12);
	border: 1px solid rgba(47, 191, 113, .25);
	color: #1f6b43;
	font-size: 15px;
}
.va-aviso--error { background: rgba(91, 26, 43, .08); border-color: rgba(91, 26, 43, .2); color: var(--va-vino); }

/* Reseñas: burbujas de cristal con la inicial */
.va-resenas__vacio { color: var(--va-gris); font-style: italic; }
.va-resenas { max-height: 820px; overflow-y: auto; scrollbar-width: thin; }
.va-resena {
	position: relative;
	margin: 0 0 14px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 22px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 4px 16px rgba(90, 64, 30, .06);
	font-family: var(--va-serif);
	font-size: 21px;
	line-height: 1.4;
	quotes: none;
}
.va-resena::before,
.va-resena::after { content: none; }
.va-resena p { margin: 0 0 10px; }
.va-resena__estrellas {
	font-family: var(--va-sans);
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--va-oro);
}
.va-resena cite {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--va-sans);
	font-style: normal;
	font-size: 13px;
	font-weight: 500;
	color: var(--va-gris);
}
.va-resena__inicial {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--va-degradado-oro);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(149, 112, 59, .3);
}

/* Ingreso */
.va-ingreso {
	max-width: 520px;
	margin: 48px auto;
	padding: 44px;
	border-radius: 32px;
	text-align: left;
}
.va-ingreso form { margin: 28px 0 8px; }
.va-ingreso .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
}
.va-ingreso input[type="checkbox"] { accent-color: var(--va-oro); width: 18px; height: 18px; }
.va-ingreso__ayuda { font-size: 15px; margin-bottom: 0; }
.va-centrado { text-align: center; font-size: 15px; }

/* Panel de bienvenida: una superficie luminosa propia, aunque el tema sea oscuro */
.va-panel {
	max-width: 1180px;
	margin: 24px auto;
	padding: 64px;
	border-radius: 40px;
	background:
		radial-gradient(50% 40% at 0% 0%, rgba(233, 211, 164, .5) 0%, rgba(233, 211, 164, 0) 70%),
		radial-gradient(50% 40% at 100% 60%, rgba(232, 200, 196, .5) 0%, rgba(232, 200, 196, 0) 70%),
		linear-gradient(180deg, #fffdf9 0%, #fbf6ee 100%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: var(--va-sombra-alta), inset 0 1px 0 #fff;
}
.va-panel__cabecera { margin-bottom: 48px; }
.va-panel__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.va-panel__barra .va-sobretitulo { margin: 0; }
.va-panel .va-idiomas { background: rgba(255, 255, 255, .8); }
.va-panel .va-titulo { font-size: clamp(44px, 7vw, 84px); }
.va-grilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
.va-grilla--chica { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.va-tarjeta {
	display: flex;
	flex-direction: column;
	padding: 10px;
	border-radius: 32px;
	color: var(--va-tinta) !important;
	text-decoration: none !important;
	transition: transform .5s var(--va-curva), box-shadow .5s var(--va-curva);
}
.va-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--va-sombra-alta); }
.va-tarjeta__imagen {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 24px;
	background: var(--va-crema);
}
.va-grilla--chica .va-tarjeta__imagen { aspect-ratio: 16 / 10; border-radius: 22px; }
.va-tarjeta__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1s var(--va-curva);
}
.va-tarjeta:hover .va-tarjeta__imagen img { transform: scale(1.05); }
.va-tarjeta__vacia {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(60% 80% at 80% 20%, rgba(227, 196, 138, .8) 0%, rgba(227, 196, 138, 0) 70%),
		radial-gradient(60% 80% at 10% 90%, rgba(232, 200, 196, .9) 0%, rgba(232, 200, 196, 0) 70%),
		linear-gradient(135deg, #fbf3e4 0%, #f3e2d8 100%);
}
.va-tarjeta__numero {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
	font-size: 13px;
	font-weight: 600;
	color: var(--va-tinta);
}
.va-tarjeta__numero svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.va-tarjeta__texto { padding: 22px 18px 18px; }
.va-tarjeta h3 {
	font-family: var(--va-serif);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.1;
	margin: 0 0 8px;
}
.va-grilla--chica .va-tarjeta h3 { font-size: 26px; }
.va-tarjeta p { margin: 0 0 14px; color: var(--va-gris); }
.va-tarjeta .va-sobretitulo { margin-bottom: 8px; }
.va-enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--va-oro-oscuro);
	background: rgba(176, 141, 87, .12);
	transition: background .3s, color .3s;
}
.va-tarjeta:hover .va-enlace { background: var(--va-degradado-oro); color: #fff; }
.va-tarjeta--bloqueada .va-tarjeta__imagen img { filter: grayscale(.4); opacity: .9; }
.va-panel__otras { margin-top: 80px; }

/* Hoja de compra: sube desde abajo en el celular, ventana centrada en la compu */
.va-hoja-abierta { overflow: hidden; }
.va-hoja {
	width: min(560px, 100% - 32px);
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 34px;
	background: transparent;
	color: var(--va-tinta);
	overflow: visible;
}
.va-hoja::backdrop {
	background: rgba(29, 26, 23, .42);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
}
.va-hoja[open] { animation: va-hoja-entra .45s var(--va-curva); }
.va-hoja[open]::backdrop { animation: va-fundido .35s ease; }
@keyframes va-hoja-entra { from { opacity: 0; transform: translateY(40px) scale(.98); } }
@keyframes va-fundido { from { opacity: 0; } }
.va-hoja__panel {
	position: relative;
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 10px;
	border-radius: 34px;
	background: rgba(255, 253, 249, .92);
	border: 1px solid rgba(255, 255, 255, .95);
	box-shadow: 0 30px 80px rgba(29, 26, 23, .35);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
	overscroll-behavior: contain;
}
.va-hoja__asa { display: none; }
.va-exp .va-hoja__cerrar {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .8) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .7) !important;
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
	color: var(--va-tinta) !important;
	font: 400 24px/1 var(--va-sans) !important;
	box-shadow: 0 4px 14px rgba(29, 26, 23, .12) !important;
	cursor: pointer;
}
.va-hoja__imagen {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 26px;
	background:
		radial-gradient(60% 80% at 80% 20%, rgba(227, 196, 138, .8) 0%, rgba(227, 196, 138, 0) 70%),
		radial-gradient(60% 80% at 10% 90%, rgba(232, 200, 196, .9) 0%, rgba(232, 200, 196, 0) 70%),
		linear-gradient(135deg, #fbf3e4 0%, #f3e2d8 100%);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.va-hoja__imagen .va-video { border-radius: inherit; }
.va-hoja__etiqueta {
	z-index: 1;
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--va-degradado-oro);
	box-shadow: 0 6px 16px rgba(149, 112, 59, .35);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
}
.va-hoja__texto { padding: 22px 18px 14px; }
.va-hoja__texto .va-sobretitulo { margin-bottom: 8px; }
.va-hoja h3 {
	font-family: var(--va-serif);
	font-weight: 500;
	font-size: clamp(30px, 7vw, 38px);
	line-height: 1.1;
	margin: 0 0 12px;
}
.va-hoja__texto > p { margin: 0 0 16px; color: var(--va-gris); font-size: 16px; }
.va-hoja__beneficios { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.va-hoja__beneficios li { display: flex; align-items: center; gap: 10px; }
.va-hoja__beneficios svg {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(176, 141, 87, .14);
	fill: none;
	stroke: var(--va-oro-oscuro);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.va-hoja__compra {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 -8px;
	padding: 12px 8px;
	border-radius: 999px;
	background: rgba(255, 253, 249, .9);
}
.va-hoja__precio { font-family: var(--va-serif); font-size: 26px; font-weight: 500; line-height: 1.1; }
.va-hoja__precio del { font-size: .6em; color: var(--va-gris); }
.va-hoja__precio ins { text-decoration: none; }
.va-exp .va-hoja__compra .va-boton { flex: 1 1 auto; justify-content: center; max-width: 260px; }
.va-hoja__detalles { margin: 6px 0 0; text-align: center; font-size: 14px; }
@media (max-width: 600px) {
	.va-hoja {
		width: 100%;
		max-height: 92dvh;
		margin: auto 0 0;
		border-radius: 30px 30px 0 0;
	}
	.va-hoja__panel { max-height: 92dvh; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; }
	.va-hoja__asa { display: block; width: 40px; height: 5px; margin: 2px auto 8px; border-radius: 999px; background: rgba(29, 26, 23, .18); }
	.va-hoja[open] { animation: va-hoja-sube .5s var(--va-curva); }
	@keyframes va-hoja-sube { from { transform: translateY(100%); } }
	.va-exp .va-hoja__cerrar { top: 28px; right: 18px; }
}
.va-panel__salir { margin-top: 56px; font-size: 14px; }

/* Aparición suave al hacer scroll (solo si el JS está activo). */
.va-js .va-revelar {
	transition: opacity .9s var(--va-curva), transform .9s var(--va-curva), box-shadow .5s var(--va-curva);
}
.va-js .va-revelar:not(.va-visto) { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
	.va-globo-aro { animation: none; }
	.va-js .va-revelar:not(.va-visto) { opacity: 1; transform: none; }
	.va-exp * { transition: none !important; }
}

/* Celular */
@media (max-width: 860px) {
	.va-exp { font-size: 16px; }
	.va-caja { padding-top: 8px; }
	.va-seccion { padding: 40px 16px; }
	.va-portada { margin: 0 8px; min-height: 58vh; min-height: 58svh; padding: 112px 20px 60px; border-radius: 28px; }
	.va-texto--capitular > p:first-of-type::first-letter { font-size: 3.6em; padding-right: 10px; }
	.va-portada__barra { top: 14px; left: 14px; right: 14px; }
	.va-volver { padding: 9px 14px; font-size: 13px; }
	.va-titulo { font-size: clamp(40px, 11vw, 60px); }
	.va-subtitulo { font-size: clamp(30px, 8.4vw, 40px); }
	.va-bajada,
	.va-lead { font-size: 19px; }
	.va-panel__barra { flex-wrap: wrap; }
	.va-indice { margin-top: -26px; padding: 0 8px; justify-content: flex-start; }
	.va-indice a { padding: 9px 14px; font-size: 13px; }
	.va-modulo,
	.va-mapa__columnas { grid-template-columns: 1fr; gap: 28px; }
	.va-modulo { margin: 20px 8px 0; padding: 32px 20px; border-radius: 28px; }
	.va-bienvenida { margin: 40px 8px 0; padding: 32px 22px; border-radius: 28px; }
	.va-numero { font-size: 64px; }
	/* En el celular las bodegas se deslizan de costado, como en iOS. */
	.va-bodegas--varias {
		display: flex;
		gap: 12px;
		margin: 0 -20px;
		padding: 4px 20px 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.va-bodegas--varias::-webkit-scrollbar { display: none; }
	.va-bodegas--varias .va-bodega { flex: 0 0 86%; scroll-snap-align: start; }
	.va-bodega h3 { font-size: 26px; }
	.va-reproductor { margin: 0 -12px; padding: 6px; border-radius: 26px; }
	.va-reproductor .plyr,
	.va-reproductor > .va-plyr { border-radius: 20px; }
	.va-mapa__lienzo { height: 420px; border-radius: 22px; }
	.va-formulario,
	.va-resenas { padding: 22px; border-radius: 22px; }
	.va-grilla,
	.va-grilla--chica { grid-template-columns: 1fr; }
	.va-panel { margin: 8px; padding: 32px 16px; border-radius: 30px; }
	.va-ingreso { padding: 30px 22px; margin: 24px auto; border-radius: 26px; }
	.va-vinos li { grid-template-columns: 44px 1fr; padding: 14px 16px; }
	.va-vinos li::before { width: 44px; height: 44px; }
}

/* El tema de la web pisa los botones y las etiquetas de los formularios: estas reglas mandan. */
.va-exp .va-boton,
.va-exp .va-ingreso input[type="submit"] {
	display: inline-flex !important;
	padding: 16px 30px !important;
	font: 600 15px/1 var(--va-sans) !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: #fff !important;
	background: var(--va-degradado-oro) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 10px 24px rgba(149, 112, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
	opacity: 1 !important;
}
.va-exp .va-ingreso input[type="submit"] { display: block !important; width: 100%; }
.va-exp .va-estrellas label { color: rgba(176, 141, 87, .25) !important; }
.va-exp .va-estrellas input:checked ~ label,
.va-exp .va-estrellas label:hover,
.va-exp .va-estrellas label:hover ~ label { color: var(--va-oro) !important; }

/* Mapa de viajeros en la portada del sitio */
.va-portada-mapa {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 32px 48px;
	max-width: 1200px;
	margin: 48px auto;
	padding: 72px 64px;
	border-radius: 40px;
	color: var(--va-tinta);
	text-align: left;
	background:
		radial-gradient(50% 60% at 0% 0%, rgba(233, 211, 164, .55) 0%, rgba(233, 211, 164, 0) 70%),
		radial-gradient(50% 60% at 100% 100%, rgba(232, 200, 196, .55) 0%, rgba(232, 200, 196, 0) 70%),
		linear-gradient(180deg, #fffdf9 0%, #fbf6ee 100%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .25), inset 0 1px 0 #fff;
	overflow: hidden;
}
.va-portada-mapa .va-subtitulo { color: var(--va-tinta); }
.va-portada-mapa__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.va-portada-mapa__texto > * { margin: 0; }
.va-portada-mapa__cifras {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--va-gris);
}
.va-portada-mapa__cifras > span {
	display: flex;
	flex-direction: column;
	padding: 14px 22px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 6px 18px rgba(90, 64, 30, .08);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
}
.va-portada-mapa__cifras strong {
	font-family: var(--va-serif);
	font-size: 52px;
	font-weight: 600;
	line-height: 1;
	color: var(--va-oro);
}
.va-portada-mapa__globo { height: 600px; background: none; box-shadow: none; }
.va-portada-mapa__citas {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.va-portada-mapa__citas .va-resena {
	margin: 0;
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: var(--va-desenfoque);
	backdrop-filter: var(--va-desenfoque);
}
@media (max-width: 860px) {
	.va-portada-mapa { grid-template-columns: 1fr; margin: 24px 8px; padding: 40px 20px; border-radius: 30px; }
	.va-portada-mapa__globo { height: 380px; }
	.va-portada-mapa__citas { grid-template-columns: 1fr; }
}