/* Header + tarjeta de búsqueda pegados y siempre visibles al hacer
   scroll (pedido del usuario, 2026-08-10) — SOLO en esta página
   (scopeado con body.pagina-indice, ver body_class en base.html).
   --header-h la calcula el JS al final del archivo, no es fija
   porque el header cambia de alto según el ancho de pantalla. */
body.pagina-indice header.navbar {
    position: sticky; top: 0; z-index: 1030;
}
body.pagina-indice .page-wrapper .container-xl {
    padding-top: 2px;
}
/* El sticky se le pone a .hero-buscador (no solo al <form>) porque
   un elemento sticky solo puede "pegarse" mientras su contenedor
   directo siga siendo visible — .hero-buscador solo mide lo que
   mide su contenido (unas líneas), así que el form adentro se
   despegaba a los pocos píxeles de scroll. .container-xl sí recorre
   toda la página, así que hero-buscador puede quedarse pegado ahí
   abajo del header durante todo el scroll. */
body.pagina-indice .hero-buscador {
    position: sticky; top: var(--header-h, 64px); z-index: 1020;
    padding: 2px .75rem; margin-bottom: 1rem;
}
body.pagina-indice .hero-buscador form.card {
    margin-bottom: 2px; padding: .5rem;
}
/* g-2 de Bootstrap reparte el mismo espaciado en X y Y — en celular
   los campos se apilan y ese espaciado vertical (antes .5rem) es
   justo lo que el usuario pidió recortar a ~2px; el horizontal
   (columnas lado a lado en escritorio) queda intacto. */
body.pagina-indice .hero-buscador .row.g-2 {
    --bs-gutter-y: 2px;
}
body.pagina-indice .hero-buscador .alert {
    margin-bottom: 2px;
}

/* Pop del índice (doc 11 del vault, v2 — mockup aprobado 2026-08-10):
   dos columnas (panel visual + cuerpo), hecho a mano porque este
   sitio no carga el JS de Bootstrap/Tabler, solo su CSS. Mismo
   patrón "overlay + modal" que negocio_pagina_propia.html. */
.pop-indice-overlay {
    position: fixed; inset: 0; z-index: 1050; background: rgba(15, 23, 35, .45);
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.pop-indice-overlay.abierto { display: flex; }
.pop-indice-modal {
    background: #fff; width: 100%; max-width: 640px; border-radius: 20px; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1.15fr; position: relative;
    box-shadow: 0 24px 60px rgba(15, 23, 35, .28);
    animation: pop-indice-entra .3s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pop-indice-entra {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pop-indice-modal { animation: none; } }
@media (max-width: 560px) { .pop-indice-modal { grid-template-columns: 1fr; max-width: 360px; } }

.pop-indice-visual {
    background: radial-gradient(120% 140% at 15% 0%, #2a78d6 0%, #163e73 55%, #0f2c52 100%);
    padding: 1.8rem 1.6rem; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px;
}
.pop-indice-visual.con-imagen { padding: 0; }
.pop-indice-visual.con-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pop-indice-visual::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(38% 38% at 82% 18%, rgba(255,255,255,.16), transparent 70%);
}
.pop-indice-visual.con-imagen::before { display: none; }
.pop-indice-visual .icono-marca { position: absolute; top: 1.4rem; left: 1.6rem; width: 2.6rem; height: 2.6rem; opacity: .9; }
.pop-indice-visual .frase {
    position: relative; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 1.3rem; line-height: 1.25; text-wrap: balance;
}
.pop-indice-visual .frase .marca { opacity: .85; font-weight: 600; font-size: .8rem; display: block; margin-top: .6rem; letter-spacing: .02em; }

.pop-indice-cuerpo { padding: 1.9rem 1.7rem 1.7rem; position: relative; display: flex; flex-direction: column; }
.pop-indice-cerrar {
    position: absolute; top: .9rem; right: .9rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    border: none; background: #f1f3f5; color: #67758b; font-size: .8rem; cursor: pointer;
}
.pop-indice-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #206bc4; margin-bottom: .5rem; }
.pop-indice-titulo { font-family: 'Poppins', sans-serif; font-size: 1.32rem; font-weight: 700; color: #182433; margin: 0 0 .6rem; text-wrap: balance; }
.pop-indice-texto { color: #57647a; font-size: .92rem; line-height: 1.55; margin: 0 0 1.1rem; }
.pop-indice-beneficios { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pop-indice-beneficios li { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: #334; }
.pop-indice-beneficios .check {
    flex-shrink: 0; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #e8f7ee; color: #2f9e58;
    display: flex; align-items: center; justify-content: center; font-size: .7rem; margin-top: .1rem;
}
.pop-indice-cta {
    display: block; text-align: center; background: #206bc4; color: #fff; font-weight: 700; font-size: .98rem;
    padding: .85rem; border-radius: 11px; text-decoration: none; box-shadow: 0 10px 22px -8px rgba(32,107,196,.55);
    transition: transform .12s ease;
}
.pop-indice-cta:hover { transform: translateY(-1px); color: #fff; }
.pop-indice-fineprint { text-align: center; font-size: .74rem; color: #8a93a3; margin-top: .7rem; }