/**
 * ═══════════════════════════════════════════════
 *  REVOLUCIÓN URBANA — GLOBAL STYLES
 *  Tipografía, botones, links, elementos base
 * ═══════════════════════════════════════════════
 */

/* ─── RESET / BASE ─── */
.ru-theme {
	font-family: var(--ru-font-body) !important;
	font-size: var(--ru-text-base);
	line-height: var(--ru-leading-normal);
	color: var(--ru-gray-700);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── PAGE BACKGROUND ─── */
.ru-theme,
.ru-theme #page-container {
	background-color: var(--ru-white, #ffffff);
}

.ru-theme .et_pb_section {
	background-color: transparent;
}

.ru-theme *,
.ru-theme *::before,
.ru-theme *::after {
	box-sizing: border-box;
}

/* ─── TEXT SELECTION ─── */
.ru-theme ::selection {
	background-color: var(--ru-yellow);
	color: var(--ru-black);
}

.ru-theme ::-moz-selection {
	background-color: var(--ru-yellow);
	color: var(--ru-black);
}

/* ─── SCROLLBAR ─── */
.ru-theme ::-webkit-scrollbar {
	width: 8px;
}

.ru-theme ::-webkit-scrollbar-track {
	background: var(--ru-black);
}

.ru-theme ::-webkit-scrollbar-thumb {
	background: var(--ru-yellow);
	border-radius: 0;
}

.ru-theme ::-webkit-scrollbar-thumb:hover {
	background: var(--ru-yellow-hover);
}

/* ─── TIPOGRAFÍA: HEADINGS ─── */
.ru-theme h1,
.ru-theme h2,
.ru-theme h3,
.ru-theme h4,
.ru-theme h5,
.ru-theme h6,
.ru-theme .et_pb_module_header,
.ru-theme .entry-title {
	font-family: var(--ru-font-heading) !important;
	text-transform: uppercase;
	letter-spacing: var(--ru-tracking-wide);
	line-height: var(--ru-leading-tight);
	color: var(--ru-black);
	font-weight: 400; /* Bebas Neue only has 400, the face itself is bold */
}

.ru-theme h1 { font-size: var(--ru-text-6xl); }
.ru-theme h2 { font-size: var(--ru-text-5xl); }
.ru-theme h3 { font-size: var(--ru-text-4xl); }
.ru-theme h4 { font-size: var(--ru-text-3xl); }
.ru-theme h5 { font-size: var(--ru-text-2xl); }
.ru-theme h6 { font-size: var(--ru-text-xl); }

/* ─── TIPOGRAFÍA: BODY ─── */
.ru-theme p,
.ru-theme li,
.ru-theme td,
.ru-theme th,
.ru-theme label,
.ru-theme .et_pb_text_inner {
	font-family: var(--ru-font-body) !important;
	font-size: var(--ru-text-base);
	line-height: var(--ru-leading-relaxed);
}

/* ─── LINKS ─── */
.ru-theme a {
	color: var(--ru-yellow);
	text-decoration: none;
	transition: color var(--ru-duration-fast) var(--ru-ease);
}

.ru-theme a:hover {
	color: var(--ru-yellow-hover);
}

/* On light backgrounds, links should be darker */
.ru-theme .et_pb_section--light a,
.ru-theme .ru-section--light a {
	color: var(--ru-gray-700);
}

.ru-theme .et_pb_section--light a:hover,
.ru-theme .ru-section--light a:hover {
	color: var(--ru-yellow-dark);
}

/* ─── BOTONES ─── */

/* Primary: Amarillo con texto negro */
.ru-theme .ru-btn,
.ru-theme .et_pb_button,
.ru-theme .button,
.ru-theme button[type="submit"],
.ru-theme input[type="submit"],
.ru-theme .woocommerce a.button,
.ru-theme .woocommerce button.button,
.ru-theme .woocommerce input.button,
.ru-theme .woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ru-space-1);
	padding: 14px 32px !important;
	font-family: var(--ru-font-heading) !important;
	font-size: var(--ru-text-lg) !important;
	letter-spacing: var(--ru-tracking-wider);
	text-transform: uppercase;
	background-color: var(--ru-yellow) !important;
	color: var(--ru-black) !important;
	border: 2px solid var(--ru-yellow) !important;
	border-radius: var(--ru-radius-none) !important;
	cursor: pointer;
	transition: background-color var(--ru-duration-base) var(--ru-ease), color var(--ru-duration-base) var(--ru-ease), border-color var(--ru-duration-base) var(--ru-ease) !important;
	text-decoration: none !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	position: relative;
	overflow: hidden;
}

.ru-theme .ru-btn:hover,
.ru-theme .et_pb_button:hover,
.ru-theme .button:hover,
.ru-theme button[type="submit"]:hover,
.ru-theme input[type="submit"]:hover,
.ru-theme .woocommerce a.button:hover,
.ru-theme .woocommerce button.button:hover,
.ru-theme .woocommerce input.button:hover,
.ru-theme .woocommerce #respond input#submit:hover {
	background-color: var(--ru-yellow-dark) !important;
	color: var(--ru-black) !important;
	border-color: var(--ru-yellow-dark) !important;
}

/* Hide Divi's default arrow icon on buttons */
.ru-theme .et_pb_button:after,
.ru-theme .et_pb_button:before {
	display: none !important;
}

/* Button variant: outline */
.ru-theme .ru-btn--outline {
	background-color: transparent !important;
	color: var(--ru-yellow) !important;
	border: 2px solid var(--ru-yellow) !important;
}

.ru-theme .ru-btn--outline:hover {
	background-color: var(--ru-yellow) !important;
	color: var(--ru-black) !important;
}

/* Button variant: dark */
.ru-theme .ru-btn--dark {
	background-color: var(--ru-black) !important;
	color: var(--ru-white) !important;
	border-color: var(--ru-black) !important;
}

.ru-theme .ru-btn--dark:hover {
	background-color: var(--ru-gray-900) !important;
}

/* Full width button */
.ru-theme .ru-btn--full {
	width: 100%;
	text-align: center;
}

/* Primary CTA — glowing effect */
.ru-theme .ru-btn--primary {
	background: var(--ru-gradient-yellow) !important;
	color: var(--ru-black) !important;
	border-color: var(--ru-yellow) !important;
	position: relative;
	overflow: hidden;
}

.ru-theme .ru-btn--primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.5s ease;
}

.ru-theme .ru-btn--primary:hover::before {
	left: 100%;
}

.ru-theme .ru-btn--primary:hover {
	background: var(--ru-yellow-dark) !important;
	background-color: var(--ru-yellow-dark) !important;
	color: var(--ru-black) !important;
	border-color: var(--ru-yellow-dark) !important;
}

/* Button size: large */
.ru-theme .ru-btn--lg {
	padding: 18px 48px !important;
	font-size: var(--ru-text-xl) !important;
}

/* Button with icon */
.ru-theme .ru-btn .ru-btn__icon {
	transition: transform var(--ru-duration-fast) var(--ru-ease);
}

.ru-theme .ru-btn:hover .ru-btn__icon {
	transform: translateX(4px);
}

/* ─── FORMS / INPUTS ─── */
.ru-theme input[type="text"],
.ru-theme input[type="email"],
.ru-theme input[type="password"],
.ru-theme input[type="search"],
.ru-theme input[type="tel"],
.ru-theme input[type="url"],
.ru-theme input[type="number"],
.ru-theme textarea,
.ru-theme select {
	font-family: var(--ru-font-body) !important;
	font-size: var(--ru-text-base);
	padding: 12px 16px;
	background-color: transparent;
	border: 1px solid var(--ru-gray-300);
	border-radius: var(--ru-radius-none);
	color: var(--ru-gray-700);
	transition: border-color var(--ru-duration-fast) var(--ru-ease);
}

.ru-theme input:focus,
.ru-theme textarea:focus,
.ru-theme select:focus {
	border-color: var(--ru-yellow);
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.2);
}

/* Dark background variants */
.ru-theme .ru-dark input,
.ru-theme .ru-dark textarea,
.ru-theme .ru-dark select {
	border-color: var(--ru-gray-600);
	color: var(--ru-white);
	background-color: rgba(255, 255, 255, 0.05);
}

.ru-theme .ru-dark input:focus,
.ru-theme .ru-dark textarea:focus {
	border-color: var(--ru-yellow);
}

/* ─── UTILITY CLASSES ─── */
.ru-text-yellow { color: var(--ru-yellow) !important; }
.ru-text-white  { color: var(--ru-white) !important; }
.ru-text-black  { color: var(--ru-black) !important; }
.ru-bg-black    { background-color: var(--ru-black) !important; }
.ru-bg-yellow   { background-color: var(--ru-yellow) !important; }
.ru-bg-dark     { background-color: var(--ru-gray-900) !important; }
.ru-bg-light    { background-color: var(--ru-white) !important; }

.ru-container {
	max-width: var(--ru-container-xl);
	margin: 0 auto;
	padding: 0 var(--ru-space-3);
}

.ru-section {
	padding: var(--ru-space-10) 0;
}

.ru-section--dark {
	background-color: var(--ru-black);
	color: var(--ru-white);
}

.ru-section--dark h1,
.ru-section--dark h2,
.ru-section--dark h3,
.ru-section--dark h4,
.ru-section--dark h5,
.ru-section--dark h6 {
	color: var(--ru-white);
}

/* ─── DIVI OVERRIDES: SECTIONS ─── */
.ru-theme .et_pb_section {
	padding: var(--ru-space-10) 0;
}

.ru-theme .et_pb_row {
	max-width: var(--ru-container-xl) !important;
	padding: 0 var(--ru-space-3) !important;
}

/* Dark sections in Divi */
.ru-theme .et_pb_section[class*="black"],
.ru-theme .et_pb_section.ru-dark {
	background-color: var(--ru-black);
}

/* ─── NOISE TEXTURE OVERLAY (subtle grain) ─── */
.ru-theme::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.025;
	z-index: 9999;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ─── GLASS CARD ─── */
.ru-glass {
	background: var(--ru-glass-bg);
	-webkit-backdrop-filter: var(--ru-glass-blur);
	backdrop-filter: var(--ru-glass-blur);
	border: 1px solid var(--ru-glass-border);
	box-shadow: var(--ru-shadow-card);
}

/* ─── GRADIENT TEXT ─── */
.ru-gradient-text {
	background: var(--ru-gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ─── DIVIDER WITH GLOW ─── */
.ru-divider {
	width: 80px;
	height: 3px;
	background: var(--ru-gradient-yellow);
	margin: var(--ru-space-2) auto 0;
	position: relative;
}

.ru-divider::after {
	content: '';
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 120%;
	height: 12px;
	background: var(--ru-gradient-radial);
	pointer-events: none;
}

/* ─── DECORATIVE CORNER ACCENTS ─── */
.ru-corner-accent {
	position: relative;
}

.ru-corner-accent::before,
.ru-corner-accent::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	border-color: var(--ru-yellow);
	border-style: solid;
	opacity: 0.3;
	transition: opacity var(--ru-duration-base) var(--ru-ease);
}

.ru-corner-accent::before {
	top: 12px;
	left: 12px;
	border-width: 2px 0 0 2px;
}

.ru-corner-accent::after {
	bottom: 12px;
	right: 12px;
	border-width: 0 2px 2px 0;
}

.ru-corner-accent:hover::before,
.ru-corner-accent:hover::after {
	opacity: 0.7;
}

/* ─── SECTION HEADLINE DECORATOR ─── */
.ru-section-heading {
	text-align: center;
	position: relative;
	padding-bottom: var(--ru-space-2);
}

.ru-section-heading::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--ru-gradient-yellow);
	margin: var(--ru-space-2) auto 0;
	border-radius: 2px;
}

.ru-section-heading h2 {
	font-size: var(--ru-text-5xl) !important;
	letter-spacing: var(--ru-tracking-wider);
}

.ru-section-heading .ru-subtitle {
	font-family: var(--ru-font-body);
	font-size: var(--ru-text-base);
	color: var(--ru-gray-400);
	text-transform: none;
	letter-spacing: var(--ru-tracking-normal);
	max-width: 560px;
	margin: var(--ru-space-2) auto 0;
	line-height: var(--ru-leading-relaxed);
}

/* ─── BACK TO TOP ─── */
.ru-theme .et_pb_scroll_top {
	background-color: var(--ru-yellow) !important;
	color: var(--ru-black) !important;
	border-radius: var(--ru-radius-none);
	width: 48px;
	height: 48px;
	right: 24px;
	bottom: 24px;
}

.ru-theme .et_pb_scroll_top:hover {
	background-color: var(--ru-yellow-dark) !important;
}

/* ─── BREADCRUMBS ─── */
.ru-theme .woocommerce-breadcrumb {
	font-family: var(--ru-font-body) !important;
	font-size: var(--ru-text-sm);
	color: var(--ru-gray-400);
	padding: var(--ru-space-2) 0;
	margin-bottom: var(--ru-space-3);
	text-transform: uppercase;
	letter-spacing: var(--ru-tracking-wide);
}

.ru-theme .woocommerce-breadcrumb a {
	color: var(--ru-gray-400);
}

.ru-theme .woocommerce-breadcrumb a:hover {
	color: var(--ru-yellow);
}

/* ─── PAGINATION ─── */
.ru-theme .woocommerce-pagination,
.ru-theme .pagination {
	margin-top: var(--ru-space-6);
}

.ru-theme .woocommerce-pagination ul li a,
.ru-theme .woocommerce-pagination ul li span {
	font-family: var(--ru-font-heading) !important;
	font-size: var(--ru-text-lg);
	padding: 8px 16px;
	border: 1px solid var(--ru-gray-300);
	border-radius: var(--ru-radius-none);
	color: var(--ru-gray-700);
	background: transparent;
}

.ru-theme .woocommerce-pagination ul li a:hover {
	background-color: var(--ru-yellow);
	border-color: var(--ru-yellow);
	color: var(--ru-black);
}

.ru-theme .woocommerce-pagination ul li span.current {
	background-color: var(--ru-yellow);
	border-color: var(--ru-yellow);
	color: var(--ru-black);
}