/* guides.css — estilos de las guías (/guides/), sacados del <style> en línea de los borradores (05-10). */
.guide-toc { background:#f7f5fb; border-left:4px solid #7D25EC; border-radius:8px; padding:22px 26px; margin:0 0 40px; }
.guide-body .guide-toc h2 { font-size:20px; margin:0 0 12px; color:#1B2A52; scroll-margin-top:0; }
.guide-toc ol { margin:0; padding-left:20px; }
.guide-toc li { margin:6px 0; list-style:decimal; }
.guide-toc a { color:#7D25EC; }
.guide-body h2 { color:#1B2A52; margin:44px 0 16px; scroll-margin-top:110px; }
.guide-figure { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; margin-bottom:30px; }
.guide-faq-q { font-size:20px; color:#1B2A52; margin:26px 0 10px; }
.guide-meta { position:static; margin:0 0 12px; }
.guide-disclaimer { font-size:14px; color:#6b7280; margin:0 0 22px; }
.guide-essentials { background:#fff; border:1px solid #e9e1fb; border-radius:12px; padding:20px 24px; margin:0 0 24px; box-shadow:0 6px 24px rgba(125,37,236,.06); }
.guide-body .guide-essentials h2 { font-size:20px; margin:0 0 12px; color:#1B2A52; }
.guide-video { position:relative; aspect-ratio:16/9; margin:20px 0 10px; border-radius:12px; overflow:hidden; background:#0a0a0f; }
.guide-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.guides-platform-title { color:#1B2A52; font-size:32px; margin:0 0 28px; padding-bottom:12px; border-bottom:1px solid #e9e1fb; }
/* tarjeta de guía: horizontal (imagen 40 %, 16:9) mientras haya pocas; toda clicable por el enlace del título */
.guides-list { display:grid; grid-template-columns:1fr; gap:30px; margin-bottom:40px; }
.guide-card { position:relative; display:grid; grid-template-columns:40% 1fr; gap:36px; align-items:center; background:#fff; border:1px solid #ece6f7; border-radius:16px; padding:22px; transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.guide-card:hover, .guide-card:focus-within { border-color:#7D25EC; box-shadow:0 14px 40px rgba(125,37,236,.14); transform:translateY(-2px); }
.guide-card-img { aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0a0a0f; }
.guide-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.guide-card-tag { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#7D25EC; background:#f3ecfe; border-radius:999px; padding:4px 12px; margin-bottom:12px; }
.guide-card-title { font-size:28px; line-height:1.25; margin:0 0 12px; color:#1B2A52; }
.guide-card-link { color:inherit; }
.guide-card-link::after { content:""; position:absolute; inset:0; border-radius:16px; z-index:1; }
.guide-card-link:focus-visible { outline:none; }
.guide-card:focus-within { outline:2px solid #7D25EC; outline-offset:3px; }
.guide-card-excerpt { margin:0 0 14px; }
.guide-card-meta { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:14px; color:#6b7280; margin:0 0 16px; }
.guide-card-meta i { flex:none; }
.guide-card-more { font-weight:600; color:#7D25EC; }
.guide-card:hover .guide-card-more { text-decoration:underline; }
/* 3 o más guías: rejilla de 2-3 columnas, misma estructura con la imagen arriba */
.guides-list:has(> .guide-card:nth-child(3)) { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }
.guides-list:has(> .guide-card:nth-child(3)) .guide-card { grid-template-columns:1fr; gap:20px; align-items:start; }
@media (max-width: 767px) {
.guide-card { grid-template-columns:1fr; gap:18px; padding:16px; }
.guide-card-title { font-size:22px; }
.guide-card-meta { white-space:normal; flex-wrap:wrap; }
}
.guide-cta { display:inline-block; margin-top:14px; }
/* el H1 de una guía es largo: banner algo más alto y título más contenido que en /price */
.breadcrumb-area { padding-top:70px; min-height:340px; }
.breadcrumb-title { font-size:clamp(34px, 4.2vw, 56px); line-height:1.15; }
.guide-table-wrap { overflow-x:auto; margin:18px 0 8px; }
.guide-table { width:100%; border-collapse:collapse; font-size:15px; }
.guide-table th, .guide-table td { border:1px solid #ece6f7; padding:10px 12px; text-align:left; vertical-align:top; }
.guide-table thead th { background:#1B2A52; color:#fff; }
.guide-table tbody th { color:#1B2A52; background:#faf8fe; }
.guide-source { font-size:13px; color:#6b7280; }
.guide-steps li { margin:10px 0; list-style:decimal; }
.guide-body ul li { list-style:disc; margin:6px 0 6px 20px; }
.guide-body img { max-width:100%; height:auto; border-radius:12px; margin:10px 0 24px; }
.guide-cta-box { background:#1B2A52; color:#fff; border-radius:14px; padding:26px 28px; margin:36px 0; }
.guide-body .guide-cta-box h3 { color:#fff; margin:0 0 8px; }
.guide-cta-box p { color:#dfe3f0; }
.guide-cta-box .theme-btn { background:#7D25EC; }
