/* ─────────────────────────────────────────────────────────────────────────
   Blog v2 (3 sep 2026): la piel de la landing para los 7.734 posts.

   Se sirve inyectada desde main.py (_blog_response) en TODOS los idiomas, asi
   que un cambio aqui llega a la vez a /blog, /es/blog, /de/blog... sin tocar
   un solo HTML. Contiene tres cosas:
     1. La escala tipografica de la casa (misma que /google-maps-scraper).
     2. El indice fijo de la izquierda y el rail de la derecha (los pinta
        blog-v2.js; aqui solo viven sus estilos).
     3. El CTA de la casa: negro con filo de degradado, nada de morado.

   Los raíles van en position:fixed a proposito. El cuerpo de un post no es un
   unico contenedor sino una pila de .article-container / .article-wide, y
   moverlos a un grid obligaria a reescribir los 7.734 ficheros.
   ───────────────────────────────────────────────────────────────────────── */

/* Fondo de la casa: blanco con la trama de puntos, igual que la guia. */
[data-theme="light"] body, body {
    background-color: #ffffff !important;
    background-image: radial-gradient(rgba(10, 10, 20, 0.05) 1px, transparent 1.4px) !important;
    background-size: 22px 22px !important;
    background-attachment: fixed !important;
}
[data-theme="light"] #injected-footer-container, #injected-footer-container { background: transparent !important; }
[data-theme="light"] .mapi-footer, .mapi-footer { background: transparent !important; border-top: 0 !important; }

/* Marca de agua bajo el pie, la misma pieza que la landing. */
.v2-wm { width: 100%; overflow: hidden; line-height: 0; background: transparent; padding: 0 2vw; box-sizing: border-box; }
.v2-wm img { width: 100%; height: auto; display: block; margin-bottom: -7vw;
    filter: grayscale(1) brightness(0) opacity(0.045); user-select: none; pointer-events: none; }
@media (max-width: 900px) { .v2-wm img { margin-bottom: -8.5vw; } }

:root {
    --bv2-ink: #0f172a;
    --bv2-sub: #64748b;
    --bv2-linea: rgba(15, 23, 42, 0.10);
    --bv2-suave: rgba(15, 23, 42, 0.04);
    --bv2-grad: linear-gradient(90deg, #8B5CF6, #3B82F6, #10B981, #3B82F6, #8B5CF6);
}

/* ── 1. Tipografia: los tamaños de la landing ───────────────────────────── */
[data-theme="light"] .blog-title,
.blog-title,
[data-theme="light"] .hero-title,
.hero-title {
    font-size: clamp(30px, 3.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
}
[data-theme="light"] .hero-subtitle,
.hero-subtitle {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.55;
    font-weight: 500;
    max-width: 760px;
}
[data-theme="light"] .section-title,
.section-title {
    font-size: clamp(23px, 2.7vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 18px;
}
[data-theme="light"] .article-body p,
[data-theme="light"] .step-content p,
[data-theme="light"] .faq-answer p {
    font-size: 16px;
    line-height: 1.75;
}
[data-theme="light"] .faq-question,
.faq-question { font-size: 16.5px; }

/* ── 2. El CTA de la casa ───────────────────────────────────────────────── */
@keyframes bv2Filo { to { background-position: 0 0, -300% 0; } }
[data-theme="light"] .cta-btn,
.cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    font-size: 14.5px; font-weight: 700; color: #fff !important; text-decoration: none;
    background: linear-gradient(#0a0a14, #0a0a14) padding-box,
        var(--bv2-grad) border-box !important;
    background-size: auto, 300% 100% !important;
    animation: bv2Filo 8s linear infinite;
    box-shadow: 0 10px 26px rgba(10, 10, 20, 0.18) !important;
    transition: transform .16s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-theme="light"] .cta-btn:hover,
.cta-btn:hover { transform: scale(1.06); }
/* Flecha detras del texto, igual que el Start Free de la barra. El isotipo que
   iba delante se quito de los 7.734 posts (4 sep 2026). */
.cta-btn::after { content: '\2192'; font-weight: 700; }
.cta-btn img { display: none; }

/* ── 3. Indice de la izquierda ──────────────────────────────────────────── */
.bv2-toc {
    position: fixed;
    top: 128px;
    left: max(20px, calc(50% - 570px));
    width: 196px;
    z-index: 40;
    padding-right: 8px;
    overflow: visible;
}
.bv2-toc-t {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--bv2-sub); margin-bottom: 12px;
}
.bv2-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bv2-linea); }
.bv2-toc li { margin: 0; }
.bv2-toc a {
    display: block; padding: 7px 0 7px 14px; margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13px; line-height: 1.4; font-weight: 500;
    color: var(--bv2-sub); text-decoration: none;
    transition: color .15s, border-color .15s;
}
.bv2-toc a:hover { color: var(--bv2-ink); }
.bv2-toc a.on { color: var(--bv2-ink); font-weight: 700; border-left-color: var(--bv2-ink); }

/* ── 4. Rail de la derecha ──────────────────────────────────────────────── */
.bv2-rail {
    position: fixed;
    top: 128px;
    right: max(20px, calc(50% - 570px));
    width: 236px;
    z-index: 40;
    /* Fijo y sin barra propia, como el indice de la izquierda: si el contenido
       no cabe en la pantalla, sobra contenido, no hace falta un scroll dentro
       de otro scroll (que era lo que pasaba antes). blog-v2.js recorta las
       listas a lo que quepa de verdad. */
    overflow: visible;
}
.bv2-caja {
    background: #fff; border: 1px solid var(--bv2-linea); border-radius: 16px;
    padding: 18px 18px 20px; margin-bottom: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.bv2-caja-t {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--bv2-sub); margin-bottom: 12px;
}
.bv2-cta-h { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--bv2-ink); margin-bottom: 7px; }
.bv2-cta-p { font-size: 13px; line-height: 1.5; color: var(--bv2-sub); margin-bottom: 15px; }
.bv2-cta-b {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 0; width: 100%;
    border: 2px solid transparent; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
    background: linear-gradient(#0a0a14, #0a0a14) padding-box, var(--bv2-grad) border-box;
    background-size: auto, 300% 100%;
    animation: bv2Filo 8s linear infinite;
    box-shadow: 0 8px 20px rgba(10, 10, 20, 0.16);
    transition: transform .16s cubic-bezier(0.23, 1, 0.32, 1);
}
.bv2-cta-b::after { content: '\2192'; font-weight: 700; }
.bv2-cta-b img { display: none; }
.bv2-cta-b:hover { transform: scale(1.06); }
.bv2-cta-b img { width: 18px; height: 18px; display: block; }
.bv2-lista { display: flex; flex-direction: column; gap: 2px; }
.bv2-lista a {
    display: block; padding: 8px 0; text-decoration: none;
    font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--bv2-ink);
    border-bottom: 1px solid var(--bv2-linea);
}
.bv2-lista a:last-child { border-bottom: 0; }
.bv2-lista a:hover { color: #3B82F6; }
.bv2-lista a { display: block; }
.bv2-tema { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em; color: #3B82F6; }
.bv2-min { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--bv2-sub); }

/* ── 5. Version estrecha: el indice se pliega arriba y la lista va al final ─ */
.bv2-toc-movil { max-width: 720px; margin: 28px auto 0; padding: 0 24px; }
.bv2-toc-movil details {
    background: #fff; border: 1px solid var(--bv2-linea); border-radius: 14px; padding: 4px 16px;
}
.bv2-toc-movil summary {
    list-style: none; cursor: pointer; padding: 12px 0;
    font-size: 13px; font-weight: 700; color: var(--bv2-ink);
}
.bv2-toc-movil summary::-webkit-details-marker { display: none; }
.bv2-toc-movil summary::after { content: '+'; float: right; color: var(--bv2-sub); font-weight: 700; }
.bv2-toc-movil details[open] summary::after { content: '\2212'; }
.bv2-toc-movil ol { list-style: none; margin: 0; padding: 0 0 12px; }
.bv2-toc-movil a { display: block; padding: 7px 0; font-size: 13.5px; color: var(--bv2-sub); text-decoration: none; }
.bv2-toc-movil a:hover { color: var(--bv2-ink); }

/* Los railes viven DENTRO del ancho de la barra de navegacion (1.140 px
   centrados): 196 de indice + 236 de rail + la columna del texto. Por debajo
   de 1.240 no caben, se esconden y el indice se pliega arriba. */
@media (max-width: 1239px) {
    .bv2-toc, .bv2-rail { display: none; }
}
@media (min-width: 1240px) {
    .bv2-toc-movil { display: none; }
    /* Sin esto la cabecera y las rejillas se metian debajo de los railes. */
    .article-hero, .article-wide, .article-container {
        max-width: 660px !important; margin-left: auto; margin-right: auto;
        padding-left: 20px !important; padding-right: 20px !important;
    }
    /* Los recomendados del propio post repetian lo que ya esta en el rail. */
    .related-section { display: none; }
}
/* Los railes se apartan al llegar al pie (van en fixed y se le montaban encima). */
.bv2-toc.bv2-fuera, .bv2-rail.bv2-fuera { opacity: 0; visibility: hidden; transition: opacity .18s; }
.bv2-toc, .bv2-rail { transition: opacity .18s; }
@media (max-width: 768px) {
    .bv2-toc-movil { padding: 0 16px; }
}