/* ==========================================================================
   Velas Velia — Estilos del sitio
   --------------------------------------------------------------------------
   Consume EXCLUSIVAMENTE los tokens de tokens.css. No hardcodear colores,
   tipografías ni espaciados aquí: usar siempre las variables del sistema.

   Estructura:
     1. Base            → tipografía, color, enlaces
     2. Layout          → contenedor central
     3. Tipografía util → .vv-display / .vv-script / .vv-rounded / …
     4. Componentes     → botones, pills, tags, badges, inputs, tarjetas…
        (traducción 1:1 de los componentes del Velia Design System; en JSX
         usan estilos inline, aquí son clases CSS reutilizables por el tema,
         WooCommerce y Elementor/Spectra)

   Convención de nombres:
     - Variables CSS   → nombres oficiales del sistema (--gold-600, --paper…)
     - Clases CSS      → prefijo vv- para aislar de Elementor/WooCommerce
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

/* La tienda "vive" sobre crema; las tarjetas blancas resaltan encima.
   `html body` para imponerse al body de Hello Elementor (carga después). */
html body {
	background-color: var(--bg-section);
}

/* Degradé cálido de fondo (crema → blush terracota), como capa fija detrás de
   todo el contenido. Las secciones con fondo propio (hero, valentina, footer,
   banda estrella…) lo cubren; las demás dejan ver el degradé. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		var(--cream) 0%,
		var(--cream) 22%,
		color-mix(in srgb, var(--terra-200) 68%, var(--cream)) 100%
	);
}

body {
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--text-heading);
	line-height: var(--leading-tight);
	font-weight: var(--fw-semibold);
}

a {
	color: var(--text-link); /* terracota */
	text-decoration: none;
	transition: color var(--dur) var(--ease-out);
}

a:hover {
	color: var(--terra-700);
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--gold-200);
	color: var(--ink-900);
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */

.vv-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.vv-container--narrow {
	max-width: var(--container-narrow);
}

/* ==========================================================================
   3. TIPOGRAFÍA · clases utilitarias (las 4 voces del sistema)
   ========================================================================== */

.vv-display {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	/* Títulos en mayúscula inicial (no todo en mayúsculas). */
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--text-heading);
	line-height: var(--leading-tight);
}

.vv-script {
	font-family: var(--font-script);
	font-weight: var(--fw-bold);
	color: var(--sage-700); /* tagline manuscrito en salvia */
}

.vv-rounded {
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	letter-spacing: 0.01em;
}

.vv-eyebrow {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.vv-label {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--text-label);
}

.vv-body {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	line-height: var(--leading-normal);
	color: var(--text-body);
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --- Botón ---------------------------------------------------------------
   Variantes: --primary (oro) · --secondary (oro outline) · --ghost · --dark
   Tamaños:   --sm · (md por defecto) · --lg          Modificador: --full   */

.vv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 26px;            /* md */
	font-family: var(--font-body);
	font-size: 15px;              /* md */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	border: var(--border-w-2) solid transparent;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-out), background var(--dur),
		filter var(--dur), border-color var(--dur);
}

.vv-btn:active        { transform: var(--press-scale); }
.vv-btn:disabled      { opacity: 0.5; cursor: not-allowed; }
.vv-btn--full         { width: 100%; }

.vv-btn--sm           { padding: 8px 18px;  font-size: 13px; }
.vv-btn--lg           { padding: 16px 38px; font-size: 17px; }

.vv-btn--primary {
	background: var(--gold-600);
	color: var(--text-on-brand);
	border-color: var(--gold-600);
	box-shadow: var(--shadow-pill);
}
.vv-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }

.vv-btn--secondary {
	background: transparent;
	color: var(--gold-700);
	border-color: var(--gold-400);
}
.vv-btn--secondary:hover:not(:disabled) { background: var(--gold-100); }

.vv-btn--ghost {
	background: transparent;
	color: var(--gold-700);
	border-color: transparent;
}
.vv-btn--ghost:hover:not(:disabled) { background: var(--gold-100); }

.vv-btn--dark {
	background: var(--ink-900);
	color: var(--text-on-brand);
	border-color: var(--ink-900);
	box-shadow: var(--shadow-sm);
}
.vv-btn--dark:hover:not(:disabled) { filter: brightness(1.06); }

/* CTA de pedido por WhatsApp (verde de marca) */
.vv-btn--whatsapp {
	background: var(--whatsapp);
	color: #FFFFFF;
	border-color: var(--whatsapp);
	box-shadow: var(--shadow-sm);
}
.vv-btn--whatsapp:hover:not(:disabled) { filter: brightness(1.04); }

/* --- Botón de icono ------------------------------------------------------
   Circular por defecto. Variantes: --soft (def.) --solid --ghost --outline */

.vv-icon-btn {
	position: relative;
	width: 42px;
	height: 42px;                 /* md */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	border: var(--border-w) solid transparent;
	cursor: pointer;
	background: var(--gold-100);  /* soft */
	color: var(--gold-800);
	transition: transform var(--dur) var(--ease-out), background var(--dur);
}

.vv-icon-btn:active   { transform: scale(0.92); }
.vv-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.vv-icon-btn--sm { width: 34px; height: 34px; }
.vv-icon-btn--lg { width: 50px; height: 50px; }

.vv-icon-btn--solid   { background: var(--gold-600); color: var(--text-on-brand); border-color: var(--gold-600); }
.vv-icon-btn--ghost   { background: transparent; color: var(--ink-700); }
.vv-icon-btn--outline { background: var(--white); color: var(--gold-800); border-color: var(--gold-300); }

/* Insignia numérica (carrito) */
.vv-icon-btn__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--ink-900);
	color: var(--text-on-brand);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* --- Tag / chip de filtro (Perros, Gatos, Religiosos…) ------------------- */

.vv-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	background: var(--white);
	color: var(--ink-700);
	border: var(--border-w) solid var(--gold-300);
	transition: all var(--dur) var(--ease-out);
}

.vv-tag:hover {
	background: var(--gold-100);
	border-color: var(--gold-400);
}

.vv-tag.is-active {
	background: var(--gold-600);
	color: var(--text-on-brand);
	border-color: var(--gold-600);
	box-shadow: var(--shadow-pill);
}

/* --- Badge / flag de estado o promo -------------------------------------
   Tonos: (gold por defecto) --soft --dark --rose --outline   Tamaño: --sm  */

.vv-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--gold-600);
	color: var(--text-on-brand);
	border: var(--border-w) solid var(--gold-600);
}

.vv-badge--sm      { padding: 3px 9px; font-size: 10px; }
.vv-badge--soft    { background: var(--gold-100); color: var(--gold-800); border-color: transparent; }
.vv-badge--dark    { background: var(--ink-900); color: var(--text-on-brand); border-color: var(--ink-900); }
.vv-badge--rose    { background: var(--rose-400); color: #5A332E; border-color: transparent; }
.vv-badge--outline { background: transparent; color: var(--gold-700); border-color: var(--gold-300); }

/* --- Campo de formulario (input / textarea) ------------------------------ */

.vv-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.vv-field__label {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--text-body);
}

.vv-input,
.vv-textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-body);
	background: var(--white);
	border: var(--border-w-2) solid var(--gold-300);
	border-radius: var(--radius-pill);
	padding: 12px 18px;
	outline: none;
	transition: border-color var(--dur), box-shadow var(--dur);
}

.vv-textarea {
	border-radius: var(--radius-md);
	padding: 12px 16px;
	resize: vertical;
	min-height: 96px;
}

.vv-input::placeholder,
.vv-textarea::placeholder { color: var(--ink-300); }

.vv-input:focus,
.vv-textarea:focus {
	border-color: var(--gold-600);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.vv-field--error .vv-input,
.vv-field--error .vv-textarea { border-color: var(--rose-400); }

.vv-field__hint  { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }
.vv-field__error { font-family: var(--font-body); font-size: 12px; color: #C06A5E; }

/* --- Price pill · la cápsula dorada de precio del catálogo ---------------
   Tamaños: --sm · (md por defecto) · --lg          Tono: --soft           */

.vv-price-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 22px;            /* md */
	border-radius: var(--radius-pill);
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	font-size: 18px;             /* md */
	letter-spacing: 0.01em;
	white-space: nowrap;
	background: var(--gold-600);
	color: var(--text-on-brand);
	box-shadow: var(--shadow-pill);
}

.vv-price-pill--sm { padding: 6px 16px;  font-size: 14px; }
.vv-price-pill--lg { padding: 14px 34px; font-size: 30px; }

.vv-price-pill--soft {
	background: var(--gold-100);
	color: var(--gold-800);
	box-shadow: none;
}

/* --- Tarjeta de producto -------------------------------------------------
   Layout shop (por defecto): foto squircle + nombre a la izquierda + precio.
   Layout grid (--grid): tile del catálogo, caption centrado con tracking.   */

.vv-product-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	cursor: pointer;
	transition: transform var(--dur) var(--ease-out);
}

.vv-product-card:hover { transform: var(--hover-lift); }

.vv-product-card__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--gold-050);
	box-shadow: var(--shadow-photo);
}

.vv-product-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Badge superpuesto en la esquina de la foto */
.vv-product-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

/* Pie (shop): nombre + meta a la izquierda, precio a la derecha */
.vv-product-card__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.vv-product-card__name {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 15px;
	color: var(--text-heading);
	line-height: 1.2;
}

.vv-product-card__meta {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--text-muted);
}

.vv-product-card__price {
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	font-size: 16px;
	color: var(--gold-700);
	white-space: nowrap;
}

/* Variante grid (catálogo): todo centrado, caption con tracking de label */
.vv-product-card--grid {
	align-items: center;
	text-align: center;
	gap: 10px;
}

.vv-product-card--grid .vv-product-card__name {
	font-weight: var(--fw-semibold);
	font-size: 13px;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--text-label);
}

.vv-product-card--grid .vv-product-card__meta { margin-top: -4px; font-size: 12px; }

/* --- Section heading · lockup de categoría (serif + script) -------------- */

.vv-section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
}

.vv-section-heading--left {
	align-items: flex-start;
	text-align: left;
}

.vv-section-heading__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: var(--text-2xl);
	line-height: 1;
	color: var(--brand);
}

.vv-section-heading__subtitle {
	font-family: var(--font-script);
	font-weight: var(--fw-bold);
	font-size: var(--text-xl);
	line-height: 0.9;
	color: var(--sage-700); /* subtítulo script en salvia */
	margin-top: calc(var(--text-2xl) * -0.16);
}

/* --- Sparkle · glifo de marca (estrella de 4 puntas) ---------------------
   Para SVG inline; controla tamaño/color con currentColor.                 */

.vv-sparkle {
	display: inline-block;
	width: 24px;
	height: 24px;
	color: var(--brand);
	vertical-align: middle;
}
.vv-sparkle svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* --- Crest de marca · monograma V + sparkle entre hairlines --------------
   El lockup de cabecera sobre los títulos de categoría (SectionHeading).    */

.vv-crest {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--brand);
}

.vv-crest__mark {
	position: relative;
	display: inline-block;
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: 36px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: inherit;
}

/* El sparkle se coloca arriba-derecha de la V */
.vv-crest__mark .vv-sparkle {
	position: absolute;
	top: -0.12em;
	right: -0.28em;
	width: 0.34em;
	height: 0.34em;
}

.vv-crest__rule { width: 86px; height: 1px; background: var(--terra-300); }

/* --- Torn divider · borde de papel rasgado ------------------------------
   Coloca el seam entre una foto a sangre y un bloque de color. El papel es
   blanco por definición de marca (por eso el fill va fijo a blanco).        */

.vv-torn {
	width: 100%;
	height: 56px;
	line-height: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	filter: drop-shadow(0 2px 3px rgba(59, 52, 43, 0.10));
}

.vv-torn--top {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 72' preserveAspectRatio='none'><path d='M0,30 L60,17 L132,35 L210,19 L292,41 L362,24 L444,39 L520,15 L602,35 L680,21 L762,42 L842,19 L922,35 L1002,17 L1080,31 L1080,72 L0,72 Z' fill='%23FFFFFF'/></svg>");
}

.vv-torn--bottom {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 72' preserveAspectRatio='none'><path d='M0,0 L1080,0 L1080,42 L1002,55 L922,37 L842,53 L762,31 L680,51 L602,37 L520,57 L444,33 L362,48 L292,31 L210,53 L132,37 L60,55 L0,42 Z' fill='%23FFFFFF'/></svg>");
}

/* --- Logo · wordmark dorado ---------------------------------------------- */

.vv-logo {
	display: block;
	height: 38px;
	width: auto;
}

.vv-logo--invert { filter: brightness(0) invert(1); } /* sobre fondos oscuros (footer) */