/*
 * Comparativas de hosting (Juankerman Site Manager).
 * Reproduce las medidas de las plantillas template-mejor-hosting-*.php (Tailwind v3)
 * sin Tailwind. Todo va dentro de .jkc para que Astra no lo altere y para no tocar
 * nada fuera de estas páginas (este archivo solo se carga en las comparativas).
 */

/* ---------- Base: anula lo que Astra aplica a html/body ---------- */
html { font-size: 100% !important; }
body.jkc-page {
	margin: 0;
	background: #111827 !important;
	color: #d1d5db;
	font-family: 'Poppins', sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
.jkc { font-family: 'Poppins', sans-serif; font-size: 1rem; line-height: 1.5; color: #d1d5db; background: #111827; }
.jkc *, .jkc *::before, .jkc *::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
.jkc h1, .jkc h2, .jkc h3, .jkc p, .jkc ul, .jkc figure { margin: 0; padding: 0; }
.jkc h1, .jkc h2, .jkc h3 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; font-family: inherit; letter-spacing: normal; text-transform: none; }
.jkc ul { list-style: none; }
.jkc a { color: inherit; text-decoration: inherit; }
.jkc strong, .jkc b { font-weight: bolder; color: #fff; }
.jkc svg { display: block; vertical-align: middle; }
.jkc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* ---------- Contenedor (container mx-auto px-6) ---------- */
.jkc .jkc-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 640px) { .jkc .jkc-container { max-width: 640px; } }
@media (min-width: 768px) { .jkc .jkc-container { max-width: 768px; } }
@media (min-width: 1024px) { .jkc .jkc-container { max-width: 1024px; } }
@media (min-width: 1280px) { .jkc .jkc-container { max-width: 1280px; } }
@media (min-width: 1536px) { .jkc .jkc-container { max-width: 1536px; } }

/* ---------- Utilidades de espaciado y texto ---------- */
.jkc .jkc-center { text-align: center; }
.jkc .jkc-mt2 { margin-top: 0.5rem; }
.jkc .jkc-mb2 { margin-bottom: 0.5rem; }
.jkc .jkc-mb3 { margin-bottom: 0.75rem; }
.jkc .jkc-mb4 { margin-bottom: 1rem; }
.jkc .jkc-mb8 { margin-bottom: 2rem; }
.jkc .jkc-mb10 { margin-bottom: 2.5rem; }
.jkc .jkc-mb16 { margin-bottom: 4rem; }
.jkc .jkc-my10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.jkc .jkc-my20 { margin-top: 5rem; margin-bottom: 5rem; }
.jkc .jkc-p6 { padding: 1.5rem; }
.jkc .jkc-p8 { padding: 2rem; }
.jkc .jkc-muted { color: #9ca3af; }
.jkc .jkc-small { font-size: 0.875rem; line-height: 1.25rem; }
.jkc .jkc-bold { font-weight: 700; }
.jkc .jkc-semibold { font-weight: 600; }
.jkc .jkc-prose p { margin-bottom: 1rem; }
.jkc .jkc-prose p:last-child { margin-bottom: 0; }

.jkc .jkc-gradient {
	background: linear-gradient(90deg, #38bdf8, #a5f3fc);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------- Titulares ---------- */
.jkc .jkc-h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.jkc .jkc-h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #fff; }
.jkc .jkc-h2-lg { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: #fff; }
.jkc .jkc-h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fff; }
.jkc .jkc-h3-sm { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #fff; }
@media (min-width: 768px) {
	.jkc .jkc-h1 { font-size: 3.75rem; line-height: 1; }
}

/* ---------- Cabecera ---------- */
.jkc .jkc-header { padding-top: 3rem; padding-bottom: 3rem; text-align: center; }
.jkc .jkc-lead { font-size: 1.125rem; line-height: 1.75rem; color: #9ca3af; max-width: 48rem; margin-left: auto; margin-right: auto; }
.jkc .jkc-lead-sm { max-width: 48rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .jkc .jkc-lead { font-size: 1.25rem; line-height: 1.75rem; } }
.jkc .jkc-updated { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: #38bdf8; }

/* ---------- Tarjetas ---------- */
.jkc .jkc-card {
	background-color: #1f2937;
	border-radius: 0.75rem;
	border: 1px solid #374151;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.jkc .jkc-card:hover { border-color: #38bdf8; box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); }
.jkc .jkc-featured {
	border-width: 2px;
	border-color: #0ea5e9;
	box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.2), 0 4px 6px -4px rgba(14, 165, 233, 0.2);
}
.jkc .jkc-featured:hover { border-color: #38bdf8; box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); }

.jkc .jkc-top-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; }
@media (min-width: 768px) { .jkc .jkc-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jkc .jkc-more { font-weight: 700; color: #818cf8; }
.jkc .jkc-more:hover { color: #a5b4fc; }

/* ---------- Botones (gamer-button) ---------- */
.jkc .jkc-button {
	display: inline-block;
	background: linear-gradient(90deg, #0ea5e9, #0284c7);
	color: #fff;
	font-weight: 700;
	padding: 0.5rem 1.5rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
	transition: all 0.3s ease;
}
.jkc .jkc-button:hover, .jkc .jkc-button:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 0 25px rgba(14, 165, 233, 0.8); }
.jkc .jkc-button-lg { padding: 0.75rem 2rem; font-size: 1.125rem; line-height: 1.75rem; }

/* ---------- Gráficas en CSS (sin JavaScript) ---------- */
.jkc .jkc-chart-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 3rem; }
@media (min-width: 1024px) { .jkc .jkc-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jkc .jkc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; margin-bottom: 1.25rem; font-size: 0.8125rem; color: #d1d5db; }
.jkc .jkc-legend li { display: flex; align-items: center; }
.jkc .jkc-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: 0.375rem; flex-shrink: 0; vertical-align: -1px; }

.jkc .jkc-bar-group { margin-bottom: 1.25rem; }
.jkc .jkc-bar-group:last-child { margin-bottom: 0; }
.jkc .jkc-bar-label { font-size: 0.875rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }
.jkc .jkc-bar-row { display: grid; grid-template-columns: 7rem 1fr 2.25rem; align-items: center; gap: 0.75rem; margin-bottom: 0.375rem; font-size: 0.8125rem; }
.jkc .jkc-bar-name { color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jkc .jkc-bar-track { display: block; height: 0.75rem; background: #374151; border-radius: 9999px; overflow: hidden; }
.jkc .jkc-bar-fill { display: block; height: 100%; border-radius: 9999px; }
.jkc .jkc-bar-value { text-align: right; font-weight: 600; color: #fff; }

.jkc .jkc-table-wrap { overflow-x: auto; }
.jkc .jkc-table { width: 100%; border-collapse: collapse; border: 0; margin: 0; font-size: 0.875rem; line-height: 1.25rem; }
.jkc .jkc-table th, .jkc .jkc-table td { padding: 0.625rem 0.5rem; border: 0; border-bottom: 1px solid #374151; text-align: center; vertical-align: middle; background: transparent; color: #d1d5db; }
.jkc .jkc-table thead th { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #9ca3af; white-space: nowrap; }
.jkc .jkc-table tbody th { text-align: left; font-weight: 600; color: #fff; }
.jkc .jkc-table td { font-weight: 600; color: #fff; }
.jkc .jkc-table tr:last-child th, .jkc .jkc-table tr:last-child td { border-bottom: 0; }
.jkc .jkc-legend-mobile { display: none; }
@media (max-width: 639px) {
	.jkc .jkc-legend-mobile { display: flex; }
	.jkc .jkc-table { font-size: 0.75rem; line-height: 1rem; }
	.jkc .jkc-table th, .jkc .jkc-table td { padding: 0.5rem 0.2rem; }
	.jkc .jkc-table thead .jkc-swatch { width: 1rem; height: 1rem; margin: 0 auto; display: block; }
	/* nombre oculto a la vista pero accesible para lectores de pantalla y buscadores */
	.jkc .jkc-table .jkc-th-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.jkc .jkc-table tbody th { width: 34%; }
}
.jkc .jkc-cell-bar { display: block; height: 4px; width: var(--v); max-width: 100%; margin: 0 auto 0.25rem 0; background: var(--c); border-radius: 9999px; }

/* ---------- Ranking ---------- */
.jkc .jkc-rank { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .jkc .jkc-rank { flex-direction: row; } }
.jkc .jkc-rank-num { flex-shrink: 0; font-size: 3rem; line-height: 1; font-weight: 700; }
.jkc .jkc-rank-body { flex-grow: 1; min-width: 0; }
.jkc .jkc-features { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .jkc .jkc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jkc .jkc-features li { display: flex; align-items: center; }
.jkc .jkc-check { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; color: #4ade80; flex-shrink: 0; }
.jkc .jkc-feature-link:hover { color: #a5b4fc; }

/* ---------- Preguntas frecuentes (details/summary, sin JavaScript) ---------- */
.jkc .jkc-faq-wrap { max-width: 56rem; margin-left: auto; margin-right: auto; }
.jkc .jkc-faq-item { background-color: #1f2937; border-radius: 0.5rem; }
.jkc .jkc-faq-item + .jkc-faq-item { margin-top: 1rem; }
.jkc .jkc-faq-item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1.5rem; cursor: pointer; list-style: none;
	font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: #fff; text-align: left;
}
.jkc .jkc-faq-item summary::-webkit-details-marker { display: none; }
.jkc .jkc-faq-item summary::marker { content: ''; }
.jkc .jkc-faq-icon { width: 1.5rem; height: 1.5rem; color: #9ca3af; flex-shrink: 0; transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.jkc .jkc-faq-item[open] .jkc-faq-icon { transform: rotate(180deg); }
.jkc .jkc-faq-answer { padding: 0 1.5rem 1.5rem; color: #9ca3af; }
.jkc .jkc-faq-answer p + p { margin-top: 1rem; }

/* ---------- Pie ---------- */
.jkc .jkc-footer { text-align: center; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid #1f2937; }
.jkc .jkc-footer-main { color: #6b7280; }
.jkc .jkc-footer-note { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: #4b5563; }

/* ---------- Secciones extra y «Otras comparativas» ---------- */
.jkc .jkc-extra-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; }
@media (min-width: 768px) { .jkc .jkc-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jkc .jkc-extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jkc .jkc-prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.jkc .jkc-prose ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 1rem; }
.jkc .jkc-prose li { margin-bottom: 0.25rem; }
.jkc .jkc-prose h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #fff; margin: 1.5rem 0 0.5rem; }
.jkc .jkc-related { max-width: 64rem; margin-left: auto; margin-right: auto; }
.jkc .jkc-related-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .jkc .jkc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .jkc .jkc-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jkc .jkc-related-link { display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-weight: 600; color: #d1d5db; }
.jkc .jkc-related-link:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.jkc .jkc-card, .jkc .jkc-button, .jkc .jkc-faq-icon { transition: none; }
	.jkc .jkc-button:hover { transform: none; }
}