/*
Theme Name: Porcelanite
Theme URI: https://porcelanite.com.mx
Author: Eugenio Cervantes
Author URI: https://porcelanite.com.mx
Description: Tema personalizado elegante, moderno y de alto rendimiento para Porcelanite México.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: porcelanite
Tags: custom-colors, custom-menu, featured-images, full-width-template, theme-options, translation-ready, block-styles

Porcelanite WordPress Theme, Copyright 2026 Eugenio Cervantes
*/

:root {
	/* Color Palette */
	--pc-color-primary: #121824;
	--pc-color-primary-light: #1e293b;
	--pc-color-accent: #c49a45;
	--pc-color-accent-hover: #b38833;
	--pc-color-bg-light: #f8fafc;
	--pc-color-surface: #ffffff;
	--pc-color-text-dark: #0f172a;
	--pc-color-text-muted: #64748b;
	--pc-color-border: #e2e8f0;
	--pc-color-card-bg: #ffffff;
	--pc-glass-bg: rgba(255, 255, 255, 0.85);
	--pc-glass-border: rgba(255, 255, 255, 0.2);

	/* Typography */
	--pc-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--pc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--pc-type-phrase: 20px;
	--pc-type-title: 14px;
	--pc-type-subtopic: 12px;
	--pc-type-small-title: 8px;
	--pc-type-paragraph: 7px;
	--pc-type-small: 5px;
	--pc-type-subtopic-1: 12px;
	--pc-type-subtopic-2: 14px;
	--pc-type-details: 5px;

	/* Layout & Spacing */
	--pc-container-max: 1280px;
	--pc-radius-sm: 8px;
	--pc-radius-md: 16px;
	--pc-radius-lg: 24px;
	--pc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
	--pc-shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
	--pc-shadow-lg: 0 20px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(0, 0, 0, 0.06);

	/* Transitions */
	--pc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
	:root {
		--pc-type-phrase: 24.2526px;
		--pc-type-title: 18.8632px;
		--pc-type-subtopic: 13.4737px;
		--pc-type-subtopic-1: 13.4737px;
		--pc-type-subtopic-2: 13.4737px;
		--pc-type-small-title: 8.0842px;
		--pc-type-paragraph: 6.7368px;
		--pc-type-small: 5.3895px;
		--pc-type-details: 5.3895px;
	}
	:root { font-size: 5.3895px; }
}

@media (min-width: 768px) {
	:root {
		--pc-type-phrase: 29.1032px;
		--pc-type-title: 22.6358px;
		--pc-type-subtopic: 16.1684px;
		--pc-type-subtopic-1: 16.1684px;
		--pc-type-subtopic-2: 16.1684px;
		--pc-type-small-title: 9.7011px;
		--pc-type-paragraph: 8.0842px;
		--pc-type-small: 6.4674px;
		--pc-type-details: 6.4674px;
	}
	:root { font-size: 6.4674px; }
}

@media (min-width: 1024px) {
	:root {
		--pc-type-phrase: 38.8042px;
		--pc-type-title: 30.1811px;
		--pc-type-subtopic: 21.5579px;
		--pc-type-subtopic-1: 21.5579px;
		--pc-type-subtopic-2: 21.5579px;
		--pc-type-small-title: 12.9347px;
		--pc-type-paragraph: 10.7789px;
		--pc-type-small: 8.6232px;
		--pc-type-details: 8.6232px;
	}
	:root { font-size: 8.6232px; }
}

@media (min-width: 1420px) {
	:root {
		--pc-type-phrase: 53.8105px;
		--pc-type-title: 41.8526px;
		--pc-type-subtopic: 29.8947px;
		--pc-type-subtopic-1: 29.8947px;
		--pc-type-subtopic-2: 29.8947px;
		--pc-type-small-title: 17.9368px;
		--pc-type-paragraph: 14.9474px;
		--pc-type-small: 11.9579px;
		--pc-type-details: 11.9579px;
	}
	:root { font-size: 11.9579px; }
}

@media (min-width: 1500px) {
	:root {
		--pc-type-phrase: 56.8421px;
		--pc-type-title: 44.2105px;
		--pc-type-subtopic: 31.5789px;
		--pc-type-subtopic-1: 31.5789px;
		--pc-type-subtopic-2: 31.5789px;
		--pc-type-small-title: 18.9474px;
		--pc-type-paragraph: 15.7895px;
		--pc-type-small: 12.6316px;
		--pc-type-details: 12.6316px;
	}
	:root { font-size: 12.6316px; }
}

@media (min-width: 1536px) {
	:root {
		--pc-type-phrase: 58.2063px;
		--pc-type-title: 45.2716px;
		--pc-type-subtopic: 32.3368px;
		--pc-type-subtopic-1: 32.3368px;
		--pc-type-subtopic-2: 32.3368px;
		--pc-type-small-title: 19.4021px;
		--pc-type-paragraph: 16.1684px;
		--pc-type-small: 12.9347px;
		--pc-type-details: 12.9347px;
	}
	:root { font-size: 12.9347px; }
}

@media (min-width: 1900px) {
	:root {
		--pc-type-phrase: 72px;
		--pc-type-title: 56px;
		--pc-type-subtopic: 40px;
		--pc-type-subtopic-1: 40px;
		--pc-type-subtopic-2: 40px;
		--pc-type-small-title: 24px;
		--pc-type-paragraph: 20px;
		--pc-type-small: 16px;
		--pc-type-details: 16px;
	}
	:root { font-size: 16px; }
}

/* Reset & Base Styles */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--pc-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--pc-color-text-dark);
	background-color: var(--pc-color-bg-light);
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pc-font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--pc-color-primary);
	margin-bottom: 0.75rem;
}

a {
	color: var(--pc-color-accent);
	text-decoration: none;
	transition: var(--pc-transition);
}

a:hover {
	color: var(--pc-color-accent-hover);
}

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

.site-container {
	width: 100%;
	max-width: var(--pc-container-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}