/* Estilos especificos del catalogo y la landing de plantilla.
   La mayor parte del estilo vive en site.css; aqui solo extras. */

/* Buscador destacado (hero del home y catalogo): pill blanca + boton Buscar */
.buscador-hero { max-width: 580px; width: 100%; margin: 0 auto 1.5rem; }
.buscador-catalogo { max-width: 580px; margin: 0 auto 2.25rem; }
.buscador-hero .input-group,
.buscador-catalogo .input-group {
    background: #fff; border-radius: 999px; overflow: hidden; padding: .25rem .25rem .25rem .35rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    transition: box-shadow .15s ease;
}
.buscador-catalogo .input-group { box-shadow: 0 4px 16px rgba(0,0,0,.09); border: 1px solid var(--borde); }
.buscador-hero .input-group:focus-within,
.buscador-catalogo .input-group:focus-within { box-shadow: 0 10px 30px rgba(16,124,65,.22); }
/* Lupa integrada (sin caja ni borde) */
.buscador-hero .input-group-text,
.buscador-catalogo .input-group-text {
    background: transparent; border: 0; padding: 0 .25rem 0 .9rem; color: var(--muted); font-size: 1.1rem;
}
.buscador-hero .form-control,
.buscador-catalogo .form-control {
    border: 0; background: transparent; box-shadow: none !important; padding: .7rem .4rem; font-size: .98rem;
}
.buscador-hero .form-control::placeholder,
.buscador-catalogo .form-control::placeholder { color: #9ca3af; }
/* Boton Buscar como pildora dentro de la barra */
.buscador-hero .btn,
.buscador-catalogo .btn {
    border: 0; border-radius: 999px; padding: .6rem 1.4rem; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
}
@media (max-width: 575.98px) {
    .buscador-hero .btn span, .buscador-catalogo .btn span { display: none; }
    .buscador-hero .btn, .buscador-catalogo .btn { padding: .6rem 1rem; }
}

.sin-resultados { text-align: center; color: var(--muted); padding: 3rem 0; }

/* Filtro por categoria (pills) - estilo del catalogo */
.filtro-categorias {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    max-width: 920px; margin: 0 auto 2.5rem;
}
.filtro-categorias .btn-cat {
    display: inline-flex; align-items: center;
    border: 1px solid var(--borde); background: #fff; color: var(--texto, #374151);
    border-radius: 999px; padding: .45rem .9rem; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.filtro-categorias .btn-cat:hover { border-color: var(--verde); color: var(--verde); }
.filtro-categorias .btn-cat.active { background: var(--verde); border-color: var(--verde); color: #fff; }
.filtro-categorias .cat-count {
    display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
    font-size: .72rem; font-weight: 700; line-height: 1.4;
    background: rgba(16,124,65,.12); color: var(--verde); border-radius: 999px;
}
.filtro-categorias .btn-cat.active .cat-count { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 575.98px) {
    .filtro-categorias { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
    .filtro-categorias .btn-cat { flex: 0 0 auto; }
}

.detalle-cta-sticky { position: sticky; top: 90px; }

/* Barra de compartir (enviar la plantilla por otros medios) */
.compartir-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem;
    padding: .9rem 1rem; background: var(--gris-bg); border: 1px solid var(--borde); border-radius: 12px;
}
.compartir-label { font-weight: 600; color: var(--muted); margin-right: .3rem; }
.btn-compartir {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--borde); background: #fff; color: #374151;
    border-radius: 999px; padding: .45rem .9rem; font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: all .15s ease;
}
.btn-compartir:hover { border-color: var(--verde); color: var(--verde); }
.btn-compartir.wa:hover { border-color: #25D366; color: #128C7E; }
.btn-compartir i { font-size: 1.05rem; }

/* Modal de descarga */
.modal-descarga-icono {
    width: 72px; height: 72px; border-radius: 50%; margin: 0 auto;
    background: rgba(16,124,65,.1); color: var(--verde);
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}
.modal-upsell { background: var(--gris-bg); border: 1px solid var(--borde); border-radius: 12px; padding: 1rem; }
.modal-upsell-titulo { font-weight: 700; color: var(--verde-osc); }

/* CTA rapido (botones compactos arriba: gratis vs PRO de un vistazo) */
.cta-rapido { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cta-rapido .btn { min-width: 240px; }
@media (max-width: 575.98px) { .cta-rapido .btn { width: 100%; } }

/* Comparativa visual gratis vs PRO */
.preview-compara h2 { font-size: 1.6rem; }
.preview-wrap {
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.preview-wrap.pro { border: 2px solid var(--verde); box-shadow: 0 10px 28px rgba(16,124,65,.18); }
/* Etiqueta como barra superior (no encima del contenido de la imagen) */
.preview-tag {
    display: block;
    font-size: .9rem; font-weight: 700;
    padding: .55rem .9rem;
}
.tag-free { background: #e5e7eb; color: #374151; }
.tag-pro { background: var(--verde); color: #fff; }
.preview-img { display: block; width: 100%; height: auto; border-top: 1px solid rgba(0,0,0,.06); }