/*
Theme Name: Bodegas Villanueva
Theme URI: https://bodegasvillanueva.com
Author: Bodegas Villanueva
Author URI: https://bodegasvillanueva.com
Description: Tema de bloques nativo (block theme / FSE) para Bodegas Villanueva. Diseño oscuro con acento dorado champán, tipografía Archivo + Inter, base para WooCommerce. Construido sin maquetadores para máximo rendimiento y edición 100% por bloques nativos (compatible con edición vía API REST / IA a futuro).
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.2.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bodegas-villanueva
Tags: dark, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, e-commerce

Este fichero es obligatorio para que WordPress reconozca la carpeta como tema
(la cabecera de arriba se lee desde Apariencia > Temas). El aspecto visual
del tema vive sobre todo en theme.json; aquí solo se cubre lo que theme.json
no puede expresar: iconografía SVG, huecos de fotografía pendiente,
animaciones de aparición al hacer scroll y algunos ajustes específicos de
WooCommerce que no tienen equivalente directo en ajustes de bloque.
*/

/* ---------- Barra de aviso superior (opcional, mismo tono que las maquetas) ---------- */
.bv-aviso {
	background: var(--wp--preset--color--barra);
	color: var(--wp--preset--color--oro-osc);
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 9px 16px;
}

/* ---------- Cabecera fija translúcida con desenfoque ---------- */
.bv-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(26, 24, 23, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* Entrada de menú activa subrayada en dorado */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--crema);
	border-bottom: 1px solid var(--wp--preset--color--oro);
}
.wp-block-navigation-item > .wp-block-navigation-item__content {
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	transition: color 0.2s, border-color 0.2s;
}
.wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--crema);
	border-bottom-color: var(--wp--preset--color--oro);
}

/* ---------- Hero de portada: resplandor dorado + botellas agrupadas ---------- */
.bv-hero {
	position: relative;
}
.bv-hero::before {
	content: "";
	position: absolute;
	inset: -30% 0 auto;
	height: 120%;
	background: radial-gradient(60% 55% at 50% 32%, rgba(221, 189, 124, 0.2), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.bv-hero > * {
	position: relative;
	z-index: 1;
}
.bv-escena {
	gap: 0 !important;
	align-items: flex-end;
	margin-top: clamp(36px, 4.5vw, 64px) !important;
	padding-bottom: clamp(44px, 6vw, 80px) !important;
}
.bv-botella-hero {
	margin: 0 clamp(-80px, -5.4vw, -28px) !important;
}
.bv-botella-hero img {
	height: clamp(320px, 42vw, 580px);
	width: auto;
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.7));
}
.bv-botella-hero-central {
	z-index: 2;
}
.bv-botella-hero-central img {
	height: clamp(370px, 48vw, 660px);
}

/* ---------- Iconografía de línea (agua / vid / sol / tierra + apoyo) ---------- */
.bv-icono {
	width: 38px;
	height: 38px;
	color: var(--wp--preset--color--oro);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bv-icono-escudo {
	width: 52px;
	height: 52px;
}

/* Marco superior de tarjeta de bodega con el símbolo del escudo */
.bv-marco-escudo {
	display: grid;
	place-items: center;
	height: 158px;
	background: linear-gradient(140deg, #302b26, #211f1d);
	border-bottom: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px 14px 0 0;
}

/* ---------- Packshot de botella (tarjeta de vino) ---------- */
.bv-packshot img {
	height: clamp(290px, 25vw, 380px);
	width: auto;
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55));
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
	margin-inline: auto;
}
/* Marco de foto de la tarjeta de vino: degradado oscuro del diseño (no superficie sólida) */
.bv-tarjeta-vino .bv-foto {
	background: linear-gradient(180deg, #252220, #1D1B19);
}
.bv-tarjeta-vino:hover .bv-packshot img {
	transform: translateY(-8px) scale(1.03);
}

/* ---------- Composición de botellas en abanico (cajas seleccionadas) ---------- */
.bv-grupo-botellas {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0;
	padding: 26px 12px 22px;
	background: linear-gradient(180deg, #332d28, #201e1c);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}
/* Las imágenes van envueltas en <figure class="wp-block-image">; se apunta a la
   figura (no al img) para que el abanico funcione, y se cuenta por nth-of-type
   para ignorar el <p class="bv-nbotellas"> que es el primer hijo del grupo. */
/* WordPress no genera la variable del slug "sup2" (los slugs de color acabados en
   dígito fallan). Se define aquí para que has-sup2-background-color y cualquier
   var(--wp--preset--color--sup2) funcionen (cajas de la home, marcos de contacto, etc.). */
body { --wp--preset--color--sup2: #2C2927; }
.has-sup2-background-color { background-color: #2C2927 !important; }
.has-sup2-color { color: #2C2927 !important; }
.has-sup2-border-color { border-color: #2C2927 !important; }

.bv-grupo-botellas .wp-block-image {
	/* margin 0 anula el margin-inline:auto que el layout "constrained" inyecta */
	margin: 0 !important;
	transform-origin: bottom center;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bv-grupo-botellas .wp-block-image img {
	height: clamp(215px, 18vw, 272px);
	width: auto;
	display: block;
	filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.66));
}
.bv-grupo-botellas > figure:nth-of-type(1) { transform: rotate(-7deg) translateY(4px); }
.bv-grupo-botellas > figure:nth-of-type(2) { z-index: 3; margin-inline: clamp(-70px, -4.6vw, -28px) !important; }
.bv-grupo-botellas > figure:nth-of-type(2) img { height: clamp(238px, 19.8vw, 300px); }
.bv-grupo-botellas > figure:nth-of-type(3) { transform: rotate(7deg) translateY(4px); }
.bv-grupo-botellas:hover > figure:nth-of-type(1) { transform: rotate(-10deg) translate(-8px, -3px); }
.bv-grupo-botellas:hover > figure:nth-of-type(2) { transform: translateY(-9px); }
.bv-grupo-botellas:hover > figure:nth-of-type(3) { transform: rotate(10deg) translate(8px, -3px); }

/* Marco de la botella en la tarjeta de vino (contiene el badge posicionado) */
.bv-foto { position: relative; }

/* Portafolio de distribuidores: solo la imagen va en marco (degradado), nombre y variedad debajo */
.bv-ref { text-align: center; }
.bv-ref-foto {
	background: linear-gradient(180deg, #2E2A26, #1F1D1B);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	padding: 12px;
	overflow: hidden;
	transition: border-color 0.3s;
}
.bv-ref-foto img {
	height: clamp(190px, 15vw, 240px);
	width: auto;
	margin-inline: auto;
	filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bv-ref:hover .bv-ref-foto { border-color: rgba(221, 189, 124, 0.4); }
.bv-ref:hover .bv-ref-foto img { transform: translateY(-6px) scale(1.03); }

/* Tarjetas con elevación al pasar el cursor (ventajas, descargas) */
.bv-hover-card { transition: transform 0.3s, background-color 0.3s, border-color 0.3s; }
.bv-hover-card:hover { border-color: rgba(221, 189, 124, 0.45); transform: translateY(-4px); }

/* Etiquetas de formulario en versalita, como el diseño */
.bv-form label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12.5px;
	color: var(--wp--preset--color--gris);
}

/* Tarjetas de contacto (distribuidores): centradas, icono centrado */
.bv-cont-card { text-align: center; }
.bv-cont-card svg { margin: 0 auto; display: block; }

/* Tarjeta de ocasión (portada): elevación y borde dorado al pasar el cursor */
.bv-ocasion { transition: transform 0.3s, background-color 0.3s, border-color 0.3s; }
.bv-ocasion:hover {
	background-color: var(--wp--preset--color--sup2);
	border-color: rgba(221, 189, 124, 0.45);
	transform: translateY(-4px);
}

/* Tarjetas de bodega y caja de la portada: misma elevación al pasar el cursor.
   padding:0 anula el padding vertical fantasma (21.25px) que WordPress añade por
   defecto a todo wp:group con backgroundColor y layout "constrained" sin padding
   propio — causaba el efecto de "doble caja" sobre el marco del escudo y
   comprimía el abanico de botellas de las cajas seleccionadas. */
.bv-tarjeta-bodega, .bv-tarjeta-caja { padding: 0 !important; transition: transform 0.3s, border-color 0.3s; }
.bv-tarjeta-bodega:hover, .bv-tarjeta-caja:hover {
	border-color: rgba(221, 189, 124, 0.45);
	transform: translateY(-4px);
}

/* Etiqueta con el número de botellas (esquina de la tarjeta de caja) */
.bv-nbotellas {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro);
	border: 1px solid rgba(221, 189, 124, 0.4);
	border-radius: 999px;
	padding: 5px 13px;
	background: rgba(20, 18, 16, 0.6);
	z-index: 3;
}

/* Badge "Edición especial" sobre packshot de botella */
.bv-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro);
	border: 1px solid rgba(221, 189, 124, 0.4);
	border-radius: 999px;
	padding: 4px 11px;
	z-index: 2;
	background: var(--wp--preset--color--sup);
}

/* Fotografía de bodega: siempre en blanco y negro (norma de marca, no casualidad) */
.bv-foto-bodega img,
.bv-bn img {
	filter: grayscale(1);
}

/* Hueco de fotografía pendiente: borde discontinuo dorado apagado */
.bv-hueco-foto {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	border: 1px dashed rgba(169, 143, 88, 0.45);
	background: linear-gradient(150deg, #2e2924, #1e1c1a);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--oro-osc);
	font-size: 13.5px;
	text-align: center;
	line-height: 1.7;
	padding: 24px;
}

/* Pastilla dorada "obligatorio" en formularios */
.bv-obligatorio {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--boton-texto);
	background: var(--wp--preset--color--oro);
	border-radius: 999px;
	padding: 3px 9px;
	margin-left: 8px;
	font-weight: 500;
	text-transform: none;
}

/* Nota de contenido de ejemplo (reseñas placeholder) */
.bv-nota-pendiente {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro-osc);
	border: 1px dashed rgba(169, 143, 88, 0.5);
	border-radius: 999px;
	padding: 7px 16px;
}

/* Banner de tienda: foto a sangre + degradado de legibilidad */
.bv-banner {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--borde);
	isolation: isolate;
}
.bv-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.34), rgba(20, 18, 16, 0.52));
}
.bv-banner > * {
	position: relative;
	z-index: 2;
}
.bv-banner .wp-block-cover__image-background,
.bv-banner img {
	filter: none;
}

/* Pie de página: fondo negro pie e iconos de red social monocromos */
.bv-footer {
	background: var(--wp--preset--color--pie);
	border-top: 1px solid var(--wp--preset--color--borde);
}
.bv-rrss a {
	width: 36px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--gris);
	transition: 0.25s;
}
.bv-rrss a:hover {
	color: var(--wp--preset--color--oro);
	border-color: var(--wp--preset--color--oro);
}
.bv-rrss svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6px;
}

/* ---------- Animación de aparición al hacer scroll ---------- */
.bv-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bv-reveal.bv-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Ajustes WooCommerce mínimos para heredar el look oscuro ---------- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: var(--wp--preset--color--crema);
}
.woocommerce span.onsale {
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--boton-texto);
	border-radius: 999px;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 999px;
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--boton-texto);
	padding: 16px 36px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	border: 1px solid var(--wp--preset--color--oro);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: #eacb8e;
	border-color: #eacb8e;
}

/* Campos obligatorios de checkout siguiendo el patrón de píldora dorada */
.woocommerce form .form-row label.bv-obligatorio-campo::after {
	content: "obligatorio";
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--boton-texto);
	background: var(--wp--preset--color--oro);
	border-radius: 999px;
	padding: 3px 9px;
	margin-left: 8px;
}

/* ---------- Formularios (Contact Form 7, patrón del sistema de diseño) ---------- */
.bv-form .bv-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.bv-form .bv-campo { margin: 0 0 16px; }
.bv-form .bv-campos .bv-campo { margin: 0; }
.bv-form .bv-campo.bv-ancho { grid-column: 1 / -1; }
.bv-form label {
	display: block;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--crema);
	margin-bottom: 8px;
}
.bv-obligatorio {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: none;
	color: var(--wp--preset--color--boton-texto);
	background: var(--wp--preset--color--oro);
	border-radius: 999px;
	padding: 2px 8px;
	margin-left: 6px;
	vertical-align: middle;
}
.bv-form input[type="text"],
.bv-form input[type="email"],
.bv-form input[type="tel"],
.bv-form select,
.bv-form textarea {
	width: 100%;
	background: var(--wp--preset--color--negro);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 10px;
	color: var(--wp--preset--color--crema);
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	padding: 13px 15px;
	transition: border-color 0.2s;
}
.bv-form textarea { min-height: 130px; resize: vertical; }
.bv-form input::placeholder,
.bv-form textarea::placeholder { color: #6f675d; }
.bv-form input:focus,
.bv-form select:focus,
.bv-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--oro);
}
.bv-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23DDBD7C' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 40px;
}
.bv-form .bv-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 22px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}
.bv-form .bv-consent .wpcf7-list-item { margin: 0; display: inline; }
.bv-form .bv-consent .wpcf7-list-item-label { display: none; }
.bv-form .bv-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 5px;
	background: var(--wp--preset--color--negro);
	cursor: pointer;
	position: relative;
}
.bv-form .bv-consent input[type="checkbox"]:checked {
	background: var(--wp--preset--color--oro);
	border-color: var(--wp--preset--color--oro);
}
.bv-form .bv-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--boton-texto);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.bv-form .bv-enviar { margin-top: 24px; margin-bottom: 0; }
.bv-form .wpcf7-submit {
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--boton-texto);
	border: 1px solid var(--wp--preset--color--oro);
	border-radius: 999px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	padding: 15px 40px;
	cursor: pointer;
	transition: 0.25s;
}
.bv-form .wpcf7-submit:hover {
	background: #EACB8E;
	border-color: #EACB8E;
	transform: translateY(-2px);
}
.wpcf7 .wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 10px;
	margin: 20px 0 0;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--wp--preset--color--gris);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #7FA37F; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--wp--preset--color--oro-osc); }
.bv-form .wpcf7-not-valid-tip {
	color: #E3A99C;
	font-size: 12.5px;
	margin-top: 6px;
}
.bv-form .wpcf7-spinner { margin-left: 12px; }
@media (max-width: 640px) {
	.bv-form .bv-campos { grid-template-columns: 1fr; }
}