/* =============================================================
   BOTONES — sistema unificado Pencil (sobreescribe components.css)
   Cargado site-wide DESPUÉS de components.css.
   Refs Pencil: Explore (gradient burgundy→rose), Plan Your Journey (glass),
   Our Sustainability Promise (accent-green), Nav CTA (gradient).
   ============================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	padding: 1.5rem 3rem;
	border-radius: 999px;
	font-family: 'Inter', var(--font-body, sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: none;          /* Pencil: NO uppercase */
	letter-spacing: 0;
	line-height: 1;
	cursor: pointer;
	border: 1.5px solid transparent;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .cusvib-ic,
.btn svg.cusvib-ic { width: 1.7rem; height: 1.7rem; }
.btn i { font-size: 1.7rem; }

/* ── Primary: gradient burgundy → rose (Explore Tours / Request Itinerary / Nav CTA) ── */
.btn--primary {
	background: linear-gradient(135deg, #8A6632 0%, #AA7E42 100%);
	color: #F4F1E4;
	border-color: transparent;
	box-shadow: 0 1rem 3rem rgba(117,38,50,.28);
}
.btn--primary:hover { box-shadow: 0 1.4rem 3.6rem rgba(117,38,50,.38); color: #fff; }

/* ── Outline (sobre fondo claro): borde burgundy ── */
.btn--outline {
	background: transparent;
	border-color: var(--son-deep-burgundy, #8A6632);
	color: var(--son-deep-burgundy, #8A6632);
}
.btn--outline:hover { background: var(--son-deep-burgundy, #8A6632); color: #fff; }

/* ── Glass / ghost (sobre fondo oscuro): blur + borde blanco (Plan Your Journey / Contact Us) ── */
.btn--outline-light,
.btn--ghost {
	background: rgba(255,255,255,.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-color: rgba(255,255,255,.35);
	color: #F4F1E4;
}
.btn--outline-light:hover,
.btn--ghost:hover {
	background: rgba(255,255,255,.2);
	border-color: rgba(255,255,255,.6);
	color: #fff;
}

/* ── Accent: verde claro + texto azul (Our Sustainability Promise) ── */
.btn--accent {
	background: var(--son-accent-green, #D1B178);
	color: var(--son-primary-blue, #232B1E);
	border-color: transparent;
	box-shadow: 0 1rem 3rem rgba(15,41,26,.25);
}
.btn--accent:hover { background: #c2e094; color: var(--son-primary-blue, #232B1E); }
.btn--accent .cusvib-ic,
.btn--accent i { color: var(--son-primary-blue, #232B1E); }

/* ── WhatsApp: verde pill (footer/CTA). El del header tiene 3 estados en layout.css ── */
.btn--whatsapp {
	background: var(--color-whatsapp, #25D366);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 .8rem 2.4rem rgba(37,211,102,.3);
}
.btn--whatsapp:hover { background: #20bd5a; color: #fff; }

/* ── Tamaños ── */
.btn--lg   { padding: 1.8rem 3.6rem; font-size: 1.6rem; }
.btn--sm   { padding: 1.1rem 2.2rem; font-size: 1.35rem; }
.btn--full { width: 100%; }

/* Nav CTA: si el header tiene una versión propia, mantener consistente con primary */
.site-header .btn--primary,
.site-header .btn--wa-header { font-size: 1.4rem; padding: 1.2rem 2.4rem; }