/* Página completa de la herramienta: H1, descripción, herramienta, contenido y FAQ.
   Personaliza los colores redefiniendo estas variables en tu tema:
   .hcl-page { --hcl-primary: #1e60d6; --hcl-mint: #17b890; } */
.hcl-page {
	--hcl-primary: #1e60d6;
	--hcl-mint: #17b890;
	--hcl-ink: #0f172a;
	--hcl-muted: #475569;
	--hcl-line: #e2e8f0;
	--hcl-soft: #f5f8fc;
	--hcl-radius: 14px;
	box-sizing: border-box;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px 48px;
	color: var(--hcl-ink);
	line-height: 1.65;
}
.hcl-page *, .hcl-page *::before, .hcl-page *::after { box-sizing: inherit; }

.hcl-hero { text-align: center; padding: 28px 0 8px; }
.hcl-page .hcl-title {
	margin: 0 0 12px;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--hcl-ink);
}
.hcl-page .hcl-lead {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	color: var(--hcl-muted);
}

.hcl-tool { margin: 28px 0 8px; }

.hcl-content { margin-top: 40px; }
.hcl-section { margin: 0 0 40px; }
.hcl-page .hcl-section h2 {
	margin: 0 0 14px;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.3;
	font-weight: 750;
	color: var(--hcl-ink);
}
.hcl-page .hcl-section h3 { margin: 22px 0 10px; font-size: 1.1rem; font-weight: 700; color: var(--hcl-ink); }
.hcl-page .hcl-section p { margin: 0 0 12px; color: var(--hcl-muted); }
.hcl-page .hcl-section ul, .hcl-page .hcl-section ol { margin: 0; padding: 0; list-style: none; }
.hcl-page .hcl-section li { color: var(--hcl-muted); }

/* Ventajas con marca de verificación */
.hcl-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; }
.hcl-checks li { position: relative; padding-left: 30px; }
.hcl-checks li::before {
	content: "";
	position: absolute; left: 0; top: .3em;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--hcl-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Pasos numerados */
.hcl-steps { counter-reset: hcl-step; display: grid; gap: 12px; }
.hcl-steps li {
	counter-increment: hcl-step;
	display: flex; align-items: flex-start; gap: 14px;
	padding: 14px 16px;
	background: var(--hcl-soft);
	border: 1px solid var(--hcl-line);
	border-radius: var(--hcl-radius);
}
.hcl-steps li::before {
	content: counter(hcl-step);
	flex: 0 0 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--hcl-primary); color: #fff;
	font-weight: 700; font-size: .95rem;
}
.hcl-steps li span { padding-top: 3px; color: var(--hcl-ink); }

/* Ideas y consejos en dos columnas */
.hcl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; }
.hcl-cols .hcl-section { margin: 0; }
.hcl-card { padding: 22px 22px 18px; border: 1px solid var(--hcl-line); border-radius: var(--hcl-radius); background: #fff; }
.hcl-page .hcl-card h2 { font-size: 1.2rem; }
.hcl-card li { position: relative; padding: 0 0 8px 20px; }
.hcl-card li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--hcl-primary); }
.hcl-card + .hcl-card li::before { background: var(--hcl-mint); }

/* Preguntas frecuentes */
.hcl-faq .hcl-q { border: 1px solid var(--hcl-line); border-radius: var(--hcl-radius); background: #fff; margin: 0 0 10px; overflow: hidden; }
.hcl-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 18px; cursor: pointer; list-style: none;
}
.hcl-faq summary::-webkit-details-marker { display: none; }
.hcl-faq summary:focus-visible { outline: 2px solid var(--hcl-primary); outline-offset: -2px; }
.hcl-page .hcl-faq summary h3 { margin: 0; font-size: 1.02rem; font-weight: 650; line-height: 1.4; }
.hcl-plus { position: relative; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--hcl-soft); }
.hcl-plus::before, .hcl-plus::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 12px; height: 2px; margin: -1px 0 0 -6px;
	background: var(--hcl-primary); border-radius: 2px; transition: transform .2s ease;
}
.hcl-plus::after { transform: rotate(90deg); }
.hcl-q[open] .hcl-plus::after { transform: rotate(0deg); }
.hcl-q[open] summary { border-bottom: 1px solid var(--hcl-line); }
.hcl-a { padding: 14px 18px 4px; }

@media (max-width: 720px) {
	.hcl-page { padding: 0 12px 36px; }
	.hcl-hero { padding-top: 18px; }
	.hcl-cols { grid-template-columns: 1fr; }
	.hcl-card { padding: 18px 16px 12px; }
	.hcl-steps li { padding: 12px; }
	.hcl-faq summary { padding: 14px; }
	.hcl-a { padding: 12px 14px 2px; }
}