/* ============================================
   DIFUNDIR.CL — Componentes de paginas de listado
   ============================================

   Hoja compartida por las paginas que listan cosas del portal:

     /empresa            → layout_empresa_lista.tpl.html
     /categoria/slug     → layout_categoria_lista.tpl.html

   Solo contiene lo que no existe en difundir.css. Se reutiliza tal cual:

     .container .section .section-title
     .btn .btn--primary .btn--outline .btn--outline-white .btn--lg .btn--block
     .breadcrumbs .breadcrumbs__list      → componente compartido
     .cat-grid .cat-card                  → tarjeta de categoria
     .biz-grid .biz-card + sus elementos  → tarjeta de negocio
     .biz-cta .biz-cta--final             → CTA final

   Se carga DESPUES de difundir.css, asi que hereda las variables de :root.
   ============================================ */

/* ---------- CABECERA COMPACTA ----------
   Deliberadamente clara y de poca altura: el hero oscuro y grande es del
   Home, y repetirlo aca le quitaria peso. */

.page-head {
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-borde);
    padding: 36px 0 32px;
}

.page-head__title {
    font-size: clamp(26px, 3.6vw, 34px);
    font-weight: 700;
    color: var(--azul-oscuro);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 10px;
}

.page-head__text {
    font-size: 16px;
    color: var(--texto-sec);
    line-height: 1.6;
    max-width: 620px;
    margin-bottom: 16px;
}

.page-head__link {
    font-size: 15px;
    font-weight: 600;
    color: var(--azul);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--t);
}

.page-head__link:hover {
    color: var(--azul-hover);
    gap: 10px;
}

/* ---------- BUSCADOR SIMPLE ----------
   Un solo campo. El .search-box del Home son dos campos y una sombra fuerte
   pensada para ir sobre el hero oscuro; aca queda fuera de lugar. */

.search-simple {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    max-width: 560px;
}

.search-simple__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--blanco);
    border: 1px solid var(--gris-input);
    border-radius: var(--r-input);
    transition: var(--t);
    min-width: 0;
}

.search-simple__field:focus-within {
    border-color: var(--azul);
    box-shadow: var(--shadow-focus);
}

.search-simple__field i {
    color: var(--texto-sec);
    font-size: 15px;
    flex-shrink: 0;
}

.search-simple__field input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 15px;
    color: var(--texto);
    background: transparent;
    min-width: 0;
}

.search-simple__field input::placeholder {
    color: var(--placeholder);
}

.search-simple .btn {
    flex-shrink: 0;
}

/* ---------- GRILLA A 3 COLUMNAS ----------
   .biz-grid del Home va a 4. Con pocas empresas, tres columnas dan tarjetas
   mas anchas y una pagina que no se ve vacia. */

.biz-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* El filtro del buscador oculta tarjetas con el atributo hidden, y .biz-card
   es display:flex, que gana por especificidad. Sin esto, seguirian visibles. */
.empresa-item[hidden] {
    display: none;
}

/* ---------- EXTENSIONES DE .biz-card ---------- */

/* Logo del negocio sobre la imagen de portada. Cuadrado y con object-fit
   contain para no deformar logos de proporciones distintas. */
.biz-card__logo {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    padding: 5px;
    background: var(--blanco);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.biz-card__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* La categoria es un enlace real hacia /categoria, no un span. */
a.biz-card__cat {
    text-decoration: none;
    width: fit-content;
    transition: var(--t);
}

a.biz-card__cat:hover {
    color: var(--azul-hover);
}

/* Conceptos o servicios destacados dentro de la tarjeta. Preparado: hoy el
   modelo del listado no devuelve servicios (ver comentario en el template). */
.biz-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.biz-card__tag {
    font-size: 12px;
    color: var(--texto-sec);
    background: var(--fondo-suave);
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    padding: 3px 9px;
}

/* El boton cierra la tarjeta: se empuja al fondo para que todas las tarjetas
   de una fila lo tengan a la misma altura, sin importar el largo del texto. */
.biz-card__body .btn {
    margin-top: auto;
}

/* ---------- ESTADO VACIO ---------- */

.empty-state {
    text-align: center;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--r-card);
    padding: 56px 24px;
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--azul-claro);
    border-radius: 50%;
    color: var(--azul);
    font-size: 26px;
    margin: 0 auto 20px;
}

.empty-state__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--azul-oscuro);
    margin-bottom: 8px;
}

.empty-state__text {
    font-size: 15px;
    color: var(--texto-sec);
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 24px;
}

/* ---------- PAGINACION ----------
   Preparada para cuando el volumen la haga necesaria. Hoy el template no la
   imprime: con pocas empresas entran todas en una pagina. */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
}

.pagination a,
.pagination span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto);
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    transition: var(--t);
}

.pagination a:hover {
    border-color: var(--azul);
    color: var(--azul);
}

.pagination .is-active {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--blanco);
}

/* ============================================
   RESPONSIVE
   Mismos cortes que difundir.css: 1024 / 768 / 480
   ============================================ */

@media (max-width: 1024px) {
    .biz-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-head {
        padding: 26px 0 24px;
    }

    .biz-grid--3 {
        grid-template-columns: 1fr;
    }

    .search-simple {
        max-width: none;
    }

    .empty-state {
        padding: 40px 20px;
    }
}

@media (max-width: 480px) {
    /* En pantallas angostas el boton bajo el campo gana area tactil y evita
       que el input quede reducido a nada. */
    .search-simple {
        flex-direction: column;
    }

    .search-simple .btn {
        width: 100%;
    }
}

/* ---------- TARJETA DE RUBRO ----------
   .cat-card y .cat-card__icon viven en difundir.css. El hub de rubros agrega
   una bajada corta debajo del nombre; el icono se resuelve con la inicial del
   rubro porque dif_tienda_categorias no tiene campo de icono. */

.cat-card__text {
    font-size: 13px;
    color: var(--texto-sec);
    line-height: 1.45;
}

/* ---------- CONTENIDO EDITABLE DE LA CABECERA ----------
   Pretitulo y descripcion vienen de dif_paginas (pag_pretitulo y
   pag_descripcion), que se editan por pagina desde el panel. La bajada usa
   .page-head__text, que ya existe arriba. */

.page-head__eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

/* pag_descripcion es texto enriquecido: puede traer parrafos, listas y
   enlaces, asi que se estilan los hijos y no solo el contenedor. */
.page-head__body {
    font-size: 15px;
    color: var(--texto);
    line-height: 1.7;
    max-width: 720px;
    margin-top: 14px;
}

.page-head__body p {
    margin-bottom: 12px;
}

.page-head__body p:last-child {
    margin-bottom: 0;
}

.page-head__body ul,
.page-head__body ol {
    margin: 0 0 12px 20px;
    list-style: revert;
}

.page-head__body li {
    margin-bottom: 6px;
}

.page-head__body a {
    color: var(--azul);
    text-decoration: underline;
}

.page-head__body a:hover {
    color: var(--azul-hover);
}

/* ---------- TARJETA SIN FOTO DE PORTADA ----------
   Cuando la empresa no subio imagenes de fanpage, EmpresaModels devuelve el
   logo como _imagen_1. El template detecta ese caso y no imprime la <img>:
   asi el logo no se recorta a una banda ni aparece dos veces en la tarjeta.
   Queda esta banda neutra, con el chip del logo encima. */

.biz-card__image--sinfoto {
    background:
        radial-gradient(120% 140% at 78% 0%, var(--azul-claro) 0%, transparent 62%),
        var(--fondo-suave);
}

/* El nombre de la tarjeta pasa a ser enlace: el texto del enlace es la empresa
   y no "Ver empresa" repetido en toda la grilla. Hereda color y peso del h3. */
.biz-card__name a {
    color: inherit;
    text-decoration: none;
    transition: var(--t);
}

.biz-card__name a:hover {
    color: var(--azul);
}

/* La cifra de resultados va pegada al titulo de seccion, no separada 40px. */
.section .section-subtitle {
    margin-bottom: 28px;
}

/* ============================================
   HERO DE CATEGORIA
   ============================================
   Reune ruta, antetitulo, H1, bajada, descripcion y buscador en una sola
   banda azul oscuro, el mismo fondo del hero del Home. La foto de la pagina
   entra por detras de un velo, asi que cada categoria se ve distinta sin que
   el texto pierda contraste. */

.cat-hero {
    position: relative;
    overflow: hidden;
    background: var(--azul-oscuro);
    padding-bottom: 40px;
}

/* Circulos de la identidad, iguales a los del hero del Home. Se ocultan
   cuando hay foto: sobre una imagen serian ruido. */
.cat-hero::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -70px;
    width: 380px;
    height: 380px;
    background: var(--azul-oscuro-2);
    border-radius: 50%;
    opacity: 0.55;
}

.cat-hero > .container,
.cat-hero > .breadcrumbs {
    position: relative;
    z-index: 2;
}

/* La ruta pasa a vivir dentro del hero: se le quita el fondo claro y su
   borde, y los colores se invierten. */
.cat-hero .breadcrumbs {
    background: transparent;
    border-bottom: 0;
    padding: 16px 0 4px;
}

.cat-hero .breadcrumbs__list {
    justify-content: center;
}

.cat-hero .breadcrumbs__list a {
    color: rgba(255, 255, 255, 0.62);
}

.cat-hero .breadcrumbs__list a:hover {
    color: var(--blanco);
}

.cat-hero .breadcrumbs__list i {
    color: rgba(255, 255, 255, 0.32);
}

.cat-hero .breadcrumbs__list span {
    color: var(--blanco);
}

/* Todo el hero centrado, igual que el del Home. */
.cat-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 18px;
    text-align: center;
}

.cat-hero__eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 10px;
}

.cat-hero__title {
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.cat-hero__text {
    font-size: clamp(15px, 1.8vw, 18px);
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.cat-hero .search-simple {
    margin: 26px auto 0;
}

.cat-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    transition: var(--t);
}

.cat-hero__link:hover {
    color: var(--blanco);
    gap: 10px;
}

@media (max-width: 768px) {
    .cat-hero {
        padding-bottom: 28px;
    }

    .cat-hero__inner {
        padding-top: 10px;
    }

    .cat-hero .search-simple {
        margin-top: 20px;
    }
}

/* ---------- DESCRIPCION DE LA CATEGORIA ----------
   Bloque claro justo bajo el hero. Aca vive pag_descripcion, el texto
   enriquecido que se edita en el panel: llega con sus propios colores
   incrustados, asi que necesita fondo claro para leerse sin pelear con el
   editor. Solo se definen tamanos y espaciado; el color se deja al contenido
   y, si no trae ninguno, hereda el del bloque. */

.cat-intro {
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-borde);
    padding: 30px 0;
}

.cat-intro__body {
    max-width: 780px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--texto-sec);
    text-align: center;
}

.cat-intro__body p {
    margin-bottom: 12px;
}

.cat-intro__body p:last-child {
    margin-bottom: 0;
}

.cat-intro__body ul,
.cat-intro__body ol {
    display: inline-block;
    text-align: left;
    margin: 0 0 12px 20px;
    list-style: revert;
}

.cat-intro__body li {
    margin-bottom: 6px;
}

.cat-intro__body a {
    color: var(--azul);
    text-decoration: underline;
}

.cat-intro__body a:hover {
    color: var(--azul-hover);
}

@media (max-width: 768px) {
    .cat-intro {
        padding: 22px 0;
    }
}

/* ---------- TAGS DE LA CATEGORIA ----------
   Cierre de la pagina. Chips estaticos, no enlaces: la tabla no guarda una
   URL por tag. Por eso no llevan hover ni cursor de mano, que prometerian un
   clic que no existe. */

.cat-tags {
    background: var(--fondo-suave);
    border-top: 1px solid var(--gris-borde);
    padding: 30px 0;
}

.cat-tags__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-sec);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin-bottom: 16px;
}

.cat-tags__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.cat-tags__item {
    font-size: 13px;
    color: var(--texto-sec);
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--r-chip);
    padding: 6px 14px;
}

@media (max-width: 768px) {
    .cat-tags {
        padding: 24px 0;
    }
}