/* ============================================================
   BLOG — iavai.es
   Compartido por: /blog/index.html y todos los artículos
   ============================================================ */

/* ---- NAV (igual que service pages) ---- */
nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(250,250,247,0.06); padding: 0 40px; height: 64px; display: flex; align-items: center; }
nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; }
.logo img { display: block; height: 24px; width: auto; }
.nav-back { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2,rgba(250,250,247,.6)); text-decoration: none; transition: color .2s; }
.nav-back:hover { color: var(--accent,#00FF66); }

/* ---- SHARED BREADCRUMB ---- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3,rgba(250,250,247,.35)); margin-bottom: 32px; flex-wrap: wrap; }
.breadcrumb a { color: inherit; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--accent,#00FF66); }
.breadcrumb .current { color: var(--fg-2,rgba(250,250,247,.6)); }
.breadcrumb span { opacity: .4; }

/* ============================================================
   BLOG INDEX
   ============================================================ */
.blog-hero { padding: 100px 0 64px; border-bottom: 1px solid rgba(250,250,247,.06); }
.blog-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.blog-label { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3,rgba(250,250,247,.35)); margin-bottom: 20px; }
.blog-hero h1 { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(40px,6vw,72px); font-weight: 300; line-height: 1.05; margin-bottom: 20px; }
.blog-hero h1 em { font-style: italic; color: var(--accent,#00FF66); }
.blog-hero p { font-size: 18px; color: var(--fg-2,rgba(250,250,247,.6)); max-width: 52ch; line-height: 1.6; }

.blog-grid-section { padding: 72px 0 120px; }
.blog-grid-section .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { display: flex; flex-direction: column; background: var(--bg-2,#111); border: 1px solid rgba(250,250,247,.06); padding: 40px; text-decoration: none; color: inherit; transition: border-color .3s, background .3s; position: relative; overflow: hidden; }
.blog-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(0,255,102,.04) 0%, transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.blog-card:hover { border-color: rgba(0,255,102,.2); background: #141414; }
.blog-card:hover::before { opacity: 1; }

.blog-card-cat { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent,#00FF66); margin-bottom: 16px; }
.blog-card h2 { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(22px,2.4vw,28px); font-weight: 300; line-height: 1.15; margin-bottom: 14px; transition: color .2s; }
.blog-card:hover h2 { color: var(--accent,#00FF66); }
.blog-card p { font-size: 15px; color: var(--fg-2,rgba(250,250,247,.6)); line-height: 1.6; flex: 1; margin-bottom: 32px; }
.blog-card-meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .1em; color: var(--fg-3,rgba(250,250,247,.35)); }
.blog-card-meta span { display: flex; align-items: center; gap: 6px; }
.blog-card-arrow { margin-left: auto; font-size: 16px; color: var(--accent,#00FF66); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.blog-card:hover .blog-card-arrow { opacity: 1; transform: translateX(0); }

/* ============================================================
   ARTÍCULO
   ============================================================ */
.art-hero { padding: 80px 0 56px; border-bottom: 1px solid rgba(250,250,247,.06); }
.art-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.art-cat { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent,#00FF66); margin-bottom: 20px; display: block; }
.art-hero h1 { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(32px,5vw,60px); font-weight: 300; line-height: 1.07; margin-bottom: 24px; max-width: 18ch; }
.art-hero h1 em { font-style: italic; color: var(--accent,#00FF66); }
.art-intro { font-size: clamp(17px,1.8vw,20px); color: var(--fg-2,rgba(250,250,247,.6)); line-height: 1.6; max-width: 58ch; margin-bottom: 36px; }
.art-byline { display: flex; align-items: center; gap: 24px; font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3,rgba(250,250,247,.35)); flex-wrap: wrap; }
.art-byline strong { color: var(--fg-2,rgba(250,250,247,.6)); font-weight: 400; }
.art-byline-sep { opacity: .3; }

/* Layout 2 columnas: TOC + contenido */
.art-layout { max-width: 1200px; margin: 0 auto; padding: 72px 40px 120px; display: grid; grid-template-columns: 220px 1fr; gap: 80px; align-items: start; }
@media (max-width: 960px) { .art-layout { grid-template-columns: 1fr; gap: 48px; padding: 48px 24px 80px; } }

/* TOC */
.art-toc { position: sticky; top: 88px; }
@media (max-width: 960px) { .art-toc { position: static; } }
.art-toc-label { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3,rgba(250,250,247,.35)); margin-bottom: 16px; }
.art-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid rgba(250,250,247,.08); }
.art-toc ol li { padding: 0; }
.art-toc ol li a { display: block; padding: 7px 0 7px 16px; font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 11px; letter-spacing: .04em; color: var(--fg-3,rgba(250,250,247,.35)); text-decoration: none; line-height: 1.4; transition: color .2s, border-color .2s; border-left: 2px solid transparent; margin-left: -1px; }
.art-toc ol li a:hover, .art-toc ol li a.active { color: var(--accent,#00FF66); border-left-color: var(--accent,#00FF66); }

/* Contenido del artículo */
.art-content h2 { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(24px,2.8vw,34px); font-weight: 300; line-height: 1.15; margin: 64px 0 20px; padding-top: 16px; border-top: 1px solid rgba(250,250,247,.06); }
.art-content h2:first-child { margin-top: 0; border-top: none; }
.art-content h3 { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(18px,1.8vw,22px); font-weight: 300; font-style: italic; line-height: 1.3; margin: 36px 0 14px; color: var(--fg-2,rgba(250,250,247,.6)); }
.art-content p { font-size: 16px; line-height: 1.75; color: var(--fg-2,rgba(250,250,247,.7)); margin-bottom: 20px; max-width: 68ch; }
.art-content strong { color: var(--fg,rgba(250,250,247,.9)); font-weight: 500; }
.art-content a { color: var(--accent,#00FF66); text-decoration: underline; text-decoration-color: rgba(0,255,102,.3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.art-content a:hover { text-decoration-color: var(--accent,#00FF66); }
.art-content ul, .art-content ol { margin: 0 0 24px 0; padding-left: 0; list-style: none; }
.art-content ul li, .art-content ol li { font-size: 16px; line-height: 1.7; color: var(--fg-2,rgba(250,250,247,.7)); padding: 6px 0 6px 22px; position: relative; max-width: 68ch; }
.art-content ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent,#00FF66); font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 12px; }
.art-content ol { counter-reset: art-counter; }
.art-content ol li { counter-increment: art-counter; }
.art-content ol li::before { content: counter(art-counter,'decimal-leading-zero'); position: absolute; left: 0; color: var(--accent,#00FF66); font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .06em; top: 8px; }

/* Tabla de precios / comparativa */
.art-table { width: 100%; border-collapse: collapse; margin: 32px 0 40px; font-size: 14px; }
.art-table th { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3,rgba(250,250,247,.35)); padding: 10px 16px; text-align: left; border-bottom: 1px solid rgba(250,250,247,.08); }
.art-table td { padding: 14px 16px; border-bottom: 1px solid rgba(250,250,247,.04); color: var(--fg-2,rgba(250,250,247,.65)); vertical-align: top; line-height: 1.5; }
.art-table td:first-child { color: var(--fg,rgba(250,250,247,.9)); font-weight: 500; }
.art-table tr:hover td { background: rgba(255,255,255,.02); }
.art-table .accent { color: var(--accent,#00FF66); font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 13px; }
@media (max-width: 640px) { .art-table { display: block; overflow-x: auto; } }

/* Callout / tip */
.art-callout { background: rgba(0,255,102,.04); border-left: 2px solid var(--accent,#00FF66); padding: 20px 24px; margin: 32px 0; border-radius: 0 2px 2px 0; }
.art-callout p { margin: 0; color: var(--fg-2,rgba(250,250,247,.7)); font-size: 15px; }
.art-callout strong { color: var(--accent,#00FF66); }

/* FAQ dentro del artículo */
.art-faq { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(250,250,247,.06); }
.art-faq-title { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(24px,2.8vw,32px); font-weight: 300; margin-bottom: 36px; }
.art-faq-item { border-bottom: 1px solid rgba(250,250,247,.06); padding: 20px 0; }
.art-faq-item:last-child { border-bottom: none; }
.art-faq-q { font-family: var(--font-display,"Fraunces",serif); font-size: 18px; font-weight: 300; line-height: 1.3; margin-bottom: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.art-faq-q::after { content: '+'; font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 18px; color: var(--accent,#00FF66); flex-shrink: 0; transition: transform .3s; }
.art-faq-item.open .art-faq-q::after { transform: rotate(45deg); }
.art-faq-a { font-size: 15px; line-height: 1.7; color: var(--fg-2,rgba(250,250,247,.65)); max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.art-faq-item.open .art-faq-a { max-height: 400px; }
.art-faq-a p { margin: 0 0 12px; }
.art-faq-a p:last-child { margin: 0; }

/* CTA block artículo */
.art-cta { margin-top: 64px; background: rgba(0,255,102,.04); border: 1px solid rgba(0,255,102,.12); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.art-cta h3 { font-family: var(--font-display,"Fraunces",serif); font-size: clamp(22px,2.6vw,30px); font-weight: 300; line-height: 1.2; margin: 0; }
.art-cta h3 em { font-style: italic; color: var(--accent,#00FF66); }
.art-cta p { font-size: 14px; color: var(--fg-2,rgba(250,250,247,.6)); margin: 8px 0 0; }
.art-cta .btn-cta { display: inline-block; padding: 14px 32px; background: var(--accent,#00FF66); color: #0A0A0A; font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; font-weight: 700; transition: opacity .2s; white-space: nowrap; flex-shrink: 0; }
.art-cta .btn-cta:hover { opacity: .85; }

/* Related articles */
.art-related { max-width: 1200px; margin: 0 auto; padding: 0 40px 80px; }
@media (max-width: 640px) { .art-related { padding: 0 24px 60px; } }
.art-related-label { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3,rgba(250,250,247,.35)); margin-bottom: 28px; padding-top: 48px; border-top: 1px solid rgba(250,250,247,.06); }
.art-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
@media (max-width: 768px) { .art-related-grid { grid-template-columns: 1fr; } }
.art-related-card { display: block; padding: 28px 32px; background: var(--bg-2,#111); border: 1px solid rgba(250,250,247,.06); text-decoration: none; color: inherit; transition: border-color .3s; }
.art-related-card:hover { border-color: rgba(0,255,102,.2); }
.art-related-cat { font-family: var(--font-mono,"JetBrains Mono",monospace); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent,#00FF66); margin-bottom: 10px; display: block; }
.art-related-card h4 { font-family: var(--font-display,"Fraunces",serif); font-size: 17px; font-weight: 300; line-height: 1.3; margin: 0; transition: color .2s; }
.art-related-card:hover h4 { color: var(--accent,#00FF66); }

/* TOC active scroll highlight */
@media (max-width: 960px) { .art-toc { display: none; } }