/* ==========================================
   GESADI - Professional Responsive Theme
   ========================================== */

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

/* Base */
body {
	font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
	color: #2c3e50;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background: #fff;
}

a:link, a:visited { color: #1a6fa0; text-decoration: none; transition: color 0.2s; }
a:hover { color: #0d4f7a; text-decoration: underline; }

h1 { font-size: 1.6rem; color: #1a3a4a; margin: 0; }
h2 { font-size: 1.3rem; color: #1a3a4a; margin: 0; }
h3 { font-size: 1.1rem; color: #1a3a4a; margin: 0; }
h4 { font-size: 1rem; color: #333; margin: 0; }
h5 { font-size: 1rem; color: #1a3a4a; margin: 0; }

ul { list-style-type: none; padding-left: 0; }
ul li { padding: 3px 0; padding-left: 1.2em; position: relative; }
ul li::before { content: "\25B8"; position: absolute; left: 0; color: #1a6fa0; font-size: 0.8em; }
ul ul { list-style-type: none; }
ul ul ul { list-style-type: none; }

img { max-width: 100%; height: auto; }
form { margin: 0; padding: 0; }
label { font: bold 1em Verdana, Arial, Helvetica, sans-serif; color: #1a3a4a; }
input { font-family: Arial, sans-serif; }

/* ==========================================
   Header
   ========================================== */
.site-header {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	background: #fff;
	border-bottom: 3px solid #1a6fa0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header .logo,
.site-header .site-logo {
	height: 50px;
	width: auto;
	flex-shrink: 0;
}

.site-header .tagline,
.site-header .site-tagline {
	margin-left: auto;
	margin-right: 20px;
	color: #7f8c8d;
	font-style: italic;
	font-weight: 600;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* Burger Button */
.burger-btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	margin-left: auto;
	z-index: 200;
}

.burger-btn span {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: #1a3a4a;
	border-radius: 3px;
	transition: all 0.3s ease;
}

.burger-btn.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 6px);
}
.burger-btn.active span:nth-child(2) {
	opacity: 0;
}
.burger-btn.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -6px);
}

/* ==========================================
   Main Layout
   ========================================== */
.site-wrapper {
	display: grid;
	grid-template-columns: 220px 1fr;
	background: #fff;
	min-height: 100vh;
}

/* ==========================================
   Sidebar Navigation
   ========================================== */
#pageNav {
	background: #fff;
	border-right: 1px solid #e0e5ea;
	font-size: 0.85rem;
	overflow-y: auto;
	position: sticky;
	top: 56px;
	max-height: calc(100vh - 56px);
}

#sectionLinks { margin: 0; padding: 0; }

#sectionLinks a:link,
#sectionLinks a:visited {
	display: block;
	padding: 10px 16px;
	border-bottom: 1px solid #e8ecf0;
	color: #1a3a4a;
	font-weight: 600;
	transition: all 0.2s;
}

#sectionLinks a:hover {
	background: #1a6fa0;
	color: #fff;
	text-decoration: none;
}

/* Product Links */
.relatedLinks {
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid #e8ecf0;
}

.relatedLinks h3 {
	padding: 0 0 6px 0;
	border-bottom: none;
}

.relatedLinks h3 a { font-size: 0.9rem; }
.relatedLinks a { display: block; font-size: 0.82rem; padding: 2px 0; }

/* ==========================================
   Content Area
   ========================================== */
#content {
	padding: 20px;
	min-width: 0;
}

/* ==========================================
   Card Component
   ========================================== */
.card {
	background: #fff;
	border: 1px solid #e0e5ea;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.card h2, .card h3 {
	margin-bottom: 12px;
	text-align: center;
}

.card-accent {
	border-left: 4px solid #1a6fa0;
	text-align: center;
}

/* ==========================================
   Feature Cards Grid
   ========================================== */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 16px 0;
}

.feature-card {
	background: #fff;
	border: 1px solid #e0e5ea;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	transition: box-shadow 0.2s;
}

.feature-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.feature-card h3 {
	margin-bottom: 10px;
	color: #1a3a4a;
}

.feature-card p {
	font-size: 0.88rem;
	color: #555;
}

/* ==========================================
   Product Table (responsive)
   ========================================== */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	margin: 0 auto;
}

.product-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	margin: 0 auto;
}

.product-table th {
	background: #5a7280;
	color: #fff;
	padding: 10px 8px;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.product-table td {
	padding: 10px 8px;
	text-align: center;
	border-bottom: 1px solid #e8ecf0;
	background: #fff;
}

.product-table tr:hover td {
	background: #f0f4f8;
}

.product-table td a { font-weight: 600; color: #1a6fa0; }

/* ==========================================
   Pricing Table
   ========================================== */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 16px 0;
}

.pricing-card {
	background: #fff;
	border: 1px solid #e0e5ea;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	transition: box-shadow 0.2s;
}

.pricing-card.featured {
	border: 2px solid #1a6fa0;
	box-shadow: 0 4px 12px rgba(26,111,160,0.15);
}

.pricing-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pricing-card h3 {
	color: #1a3a4a;
	margin-bottom: 8px;
}

.pricing-card .price {
	font-size: 1.8rem;
	font-weight: 700;
	color: #1a6fa0;
	margin: 12px 0;
}

.pricing-card ul {
	text-align: left;
	margin: 12px 0;
}

/* ==========================================
   Section Headings
   ========================================== */
.section-title {
	font-size: 1.2rem;
	color: #1a3a4a;
	border-bottom: 2px solid #1a6fa0;
	padding-bottom: 8px;
	margin-bottom: 16px;
	text-align: center;
}

.subsection-title {
	font-size: 1rem;
	color: #1a6fa0;
	font-weight: 600;
	margin: 16px 0 8px 0;
}

/* ==========================================
   Badge / Tag
   ========================================== */
.badge {
	display: inline-block;
	background: #1a6fa0;
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.badge-success { background: #27ae60; }
.badge-price { background: #e67e22; }

/* ==========================================
   Footer
   ========================================== */
.site-footer {
	grid-column: 1 / -1;
	border-top: 2px solid #1a6fa0;
	padding: 20px;
	text-align: center;
	font-size: 0.82rem;
	background: #fff;
}

.footer-links {
	margin: 6px 0;
}

.footer-links a {
	margin: 0 6px;
	color: #1a6fa0;
}

.site-copyright {
	grid-column: 1 / -1;
	text-align: center;
	padding: 16px;
	font-size: 0.78rem;
	background: #fff;
	color: #7f8c8d;
	border-top: 1px solid #e0e5ea;
}

/* ==========================================
   Utility
   ========================================== */
.text-muted { color: #7f8c8d; }
.text-small { font-size: 0.85rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }

/* ==========================================
   Legacy Estilo Classes (preserved)
   ========================================== */
.Estilo1 { color: #1a3a4a; }
.Estilo3 {}
.Estilo8 { font-size: small; }
.Estilo9 { font-size: x-small; }
.Estilo14 { font-size: medium; color: #1a3a4a; }
.Estilo17 { font-size: x-small; }
.Estilo20 { font-weight: bold; }
.Estilo21 { font-weight: bold; font-size: 120%; }
.Estilo27 { font-size: small; font-family: Verdana, Arial, Helvetica, sans-serif; }
.Estilo28 { color: #1a6fa0; }
.Estilo29 { font-size: small; }
.Estilo30 { font-size: small; }
.Estilo31 { font-size: medium; }
.Estilo32 { font-size: medium; }
.Estilo33 { font-size: small; }
.Estilo39 { font-weight: bold; color: #1a6fa0; }
.Estilo42 { font-weight: bold; color: #fff; }
.Estilo49 { font-size: 100%; color: #fff; font-weight: bold; }
.Estilo53 { color: #7f8c8d; font-size: x-small; }
.Estilo56 { color: #1a6fa0; }
.Estilo58 { font-size: small; font-weight: bold; color: #1a6fa0; }
.Estilo64 { font-size: 9px; }
.Estilo65 { font-size: 9px; color: #fff; font-weight: bold; }
.Estilo66 { color: #27ae60; font-weight: bold; }
.Estilo67 { color: #c0392b; }
.Estilo69 { color: #2c3e80; font-weight: bold; }
.Estilo70 { color: #c0392b; font-size: medium; }
.Estilo71 { color: #1a6fa0; font-size: medium; }
.Estilo72 { color: #c0392b; font-size: medium; font-weight: bold; }
.Estilo73 { color: #1a6fa0; font-size: small; font-weight: bold; }
.Estilo74 { color: #1a6fa0; font-size: medium; }
.Estilo75 { font-size: small; color: #1a3a4a; font-weight: bold; }
.Estilo76 { font-size: medium; }
.Estilo77 { font-size: medium; }
.Estilo78 { color: #27ae60; font-weight: bold; font-size: large; }
.Estilo79 { color: #1a6fa0; font-size: medium; font-weight: bold; }
.Estilo80 { color: #3498db; font-weight: bold; }
.Estilo84 { color: #fff; font-size: xx-large; font-weight: bold; }
.Estilo85 { color: #7f8c8d; font-style: italic; font-weight: bold; }
.Estilo86 { font-size: x-large; font-weight: bold; }
.Estilo87 { font-size: medium; }
.Estilo92 { font-size: medium; }
.Estilo277 { font-size: x-small; }

/* ==========================================
   Legacy Table Layouts (compatibility)
   ========================================== */
table[width="800"],
table[width="600"],
table[width="397"] {
	width: 100% !important;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

td[background] {
	background-image: none !important;
	background-color: transparent !important;
}

/* ==========================================
   Responsive: Tablet (max-width 900px)
   ========================================== */
@media (max-width: 900px) {
	.site-wrapper {
		grid-template-columns: 1fr;
	}

	#pageNav {
		border-right: none;
		border-bottom: 1px solid #e0e5ea;
		position: static;
		max-height: none;
		display: none;
	}

	#pageNav.open {
		display: block;
	}

	#sectionLinks {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

	#sectionLinks a:link,
	#sectionLinks a:visited {
		display: inline-block;
		padding: 10px 16px;
		flex: 0 0 auto;
	}

	.relatedLinks {
		display: inline-block;
		vertical-align: top;
		padding: 10px 16px;
		border-bottom: none;
		border-right: 1px solid #e8ecf0;
	}

	.relatedLinks:last-child { border-right: none; }

	.burger-btn { display: block; }

	.feature-grid {
		grid-template-columns: 1fr;
	}

	.pricing-grid {
		grid-template-columns: 1fr;
	}

	.site-header .tagline,
	.site-header .site-tagline {
		display: none;
	}

	#pageNav.open #sectionLinks {
		flex-direction: column;
	}

	#pageNav.open .relatedLinks {
		display: block;
		border-right: none;
		border-bottom: 1px solid #e8ecf0;
	}
}

/* ==========================================
   Responsive: Mobile (max-width 600px)
   ========================================== */
@media (max-width: 600px) {
	.site-header {
		padding: 10px 14px;
	}

	.site-header .logo,
	.site-header .site-logo {
		height: 40px;
	}

	#content {
		padding: 12px;
	}

	.card {
		padding: 14px;
	}

	.feature-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.pricing-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.product-table {
		font-size: 0.78rem;
	}

	.product-table th,
	.product-table td {
		padding: 6px 4px;
	}
}

/* ==========================================
   Pricing Compare Grid
   ========================================== */
.pricing-compare {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e0e5ea;
    border-radius: 6px;
    overflow: hidden;
}

.pricing-compare-header,
.pricing-compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

.pricing-compare-header {
    background: #5a7280;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.pricing-compare-header > div {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.pricing-compare-header > div:last-child {
    border-right: none;
}

.pricing-compare-header a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.pricing-compare-row > div {
    padding: 8px;
    font-size: 0.82rem;
    border-bottom: 1px solid #e8ecf0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pricing-compare-row > div:first-child {
    justify-content: flex-start;
    font-weight: 600;
}

.pricing-compare-row:last-child > div {
    border-bottom: none;
}

.pricing-compare-row:hover > div {
    background: #f0f4f8;
}

@media (max-width: 600px) {
    .pricing-compare-header,
    .pricing-compare-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        font-size: 0.72rem;
    }
    .pricing-compare-header > div,
    .pricing-compare-row > div {
        padding: 6px 4px;
    }
}

/* ==========================================
   Pricing Table (landing legacy)
   ========================================== */
table.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

table.pricing-table td {
    padding: 8px;
    border: 1px solid #e0e5ea;
    text-align: center;
    vertical-align: middle;
}

table.pricing-table td.pricing-header {
    background: #5a7280;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

table.pricing-table td:first-child {
    text-align: left;
    font-weight: 600;
}

table.pricing-table tr:hover td {
    background: #f0f4f8;
}

table.pricing-table tr:hover td.pricing-header {
    background: #5a7280;
}

@media (max-width: 600px) {
    table.pricing-table { font-size: 0.72rem; }
    table.pricing-table td { padding: 5px 4px; }
}

/* ==========================================
   Nav / Sidebar
   ========================================== */
#sectionLinks img {
    max-width: 150px;
    display: block;
    margin: 0 auto 10px auto;
}

.relatedLinks img {
    max-width: 30px;
}

/* ==========================================
   Icon Checks / Crosses
   ========================================== */
.icon-yes {
    color: #27ae60;
    font-weight: bold;
}

.icon-no {
    color: #c0392b;
}

/* ==========================================
   Utility Classes
   ========================================== */
.card-center {
    text-align: center;
}

.btn-download img,
.btn-buy img {
    max-width: 221px;
}

.btn-buy img {
    max-width: 200px;
}

/* ==========================================
   End
   ========================================== */