@charset "utf-8";
/* =========================================================
   BASE GENERAL
   ========================================================= */

.tj-cat26,.tj-cat26 *,.tj-cat26 *:before,.tj-cat26 *:after {
    box-sizing:border-box
}

.tj-cat26 {
    --b:#0b3f78;
    --bd:#072e5d;
    --r:#e30613;
    --muted:#75869f;
    --line:#dce6f1;
    color:#173d70;
    background:#fff;
    font-family:inherit
}

.tj-cat26 a {
    text-decoration:none
}

.tj-cat26__container {
    width:min(1420px,calc(100% - 48px));
    margin:auto
}

/* =========================================================
   HERO / ENCABEZADO DE CATEGORÍAS
   ========================================================= */

.tj-cat26__hero {
    padding:28px 0 35px;
    background:radial-gradient(circle at 82% 10%,rgba(205,225,248,.45),transparent 30%),linear-gradient(#fff,#f9fbfe);
    overflow:hidden
}

.tj-cat26__crumb {
    display:flex;
    gap:9px;
    margin-bottom:24px;
    color:#7c8ca3;
    font-size:12px
}

.tj-cat26__crumb a {
    color:var(--b);
    font-weight:700
}

.tj-cat26__eyebrow {
    display:block;
    margin-bottom:7px;
    color:#7a8da9;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em
}

.tj-cat26 h1 {
    margin:0;
    color:var(--b);
    font-size:clamp(32px,4vw,52px);
    line-height:1.02;
    letter-spacing:-.035em
}

.tj-cat26 h1 strong {
    color:var(--r)
}

.tj-cat26__lead {
    max-width:720px;
    margin:12px 0 0;
    color:#627793;
    font-size:16px;
    line-height:1.5
}

/* =========================================================
   BUSCADOR DE CATEGORÍAS
   ========================================================= */

.tj-cat26__search {
    display:grid;
    grid-template-columns:28px 1fr auto;
    align-items:center;
    gap:10px;
    width:min(850px,100%);
    min-height:60px;
    margin-top:25px;
    padding:5px 6px 5px 18px;
    background:#fff;
    border:2px solid #0c75db;
    border-radius:14px;
    box-shadow:0 8px 22px rgba(11,63,120,.10)
}

.tj-cat26__glass {
    color:var(--b);
    font-size:29px;
    font-weight:700;
    line-height:1
}

.tj-cat26__search input {
    width:100%;
    min-width:0;
    height:46px;
    border:0;
    outline:0;
    background:transparent;
    color:#173d70;
    font:inherit;
    font-size:16px
}

.tj-cat26__search button {
    min-width:125px;
    height:48px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(#1687ee,#0569c9);
    box-shadow:0 5px 13px rgba(5,105,201,.23);
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer
}

/* =========================================================
   CATEGORÍAS POPULARES
   ========================================================= */

.tj-cat26__popular-title {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:27px
}

.tj-cat26__popular-title h2 {
    margin:0;
    color:var(--b);
    font-size:17px;
    text-transform:uppercase
}

.tj-cat26__populares {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:13px;
    margin-top:12px
}

.tj-pop26 {
    position:relative;
    display:flex;
    min-height:126px;
    padding:15px 12px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:var(--b)!important;
    text-align:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 8px 22px rgba(16,55,99,.07);
    transition:.22s
}

.tj-pop26:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--r) 0 35%,#0877e8 35%);
    transform:scaleX(.28);
    transition:.22s
}

.tj-pop26:hover {
    transform:translateY(-4px);
    box-shadow:0 13px 28px rgba(11,63,120,.13)
}

.tj-pop26:hover:after {
    transform:scaleX(1)
}

.tj-pop26__icon {
    font-size:32px;
    line-height:1;
    margin-bottom:7px
}

.tj-pop26 strong {
    font-size:15px
}

.tj-pop26 small {
    margin-top:4px;
    color:#788ba5;
    font-size:10px
}

/* =========================================================
   DIRECTORIO: TODAS LAS CATEGORÍAS
   ========================================================= */

.tj-cat26__directory {
    padding:38px 0 65px;
    border-top:1px solid #edf2f7;
    background:linear-gradient(#fff,#f8fbff 48%,#fff)
}

.tj-cat26__dirhead {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:14px
}

.tj-cat26__dirhead h2 {
    margin:0;
    color:var(--b);
    font-size:29px
}

.tj-cat26__alphabet {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:5px
}

.tj-cat26__alphabet button {
    min-width:31px;
    height:31px;
    padding:0 8px;
    border:1px solid #d6e3f1;
    border-radius:16px;
    background:#fff;
    color:var(--b);
    font:inherit;
    font-size:10px;
    font-weight:800;
    cursor:pointer
}

.tj-cat26__alphabet button.is-active,.tj-cat26__alphabet button:hover {
    background:var(--b);
    border-color:var(--b);
    color:#fff
}

.tj-cat26__status {
    margin-bottom:13px;
    color:#8a99ad;
    font-size:11px
}

.tj-cat26__grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px 13px
}

.tj-cat26__card {
    position:relative;
    display:grid;
    grid-template-columns:1fr 18px;
    align-items:center;
    gap:10px;
    min-height:56px;
    padding:10px 15px 10px 17px;
    overflow:hidden;
    color:#173d70!important;
    background:#fff;
    border:1px solid #dfe8f2;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(11,63,120,.035);
    font-size:16px;
    transition:.18s;
    font-weight: 700;
}

.tj-cat26__card:before {
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:3px;
    background:var(--r);
    transform:scaleY(0);
    transition:.18s
}

.tj-cat26__card span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.tj-cat26__card b {
    justify-self:end;
    color:#5d7ea6;
    font-size:20px;
    font-weight:400
}

.tj-cat26__card:hover {
    color:#fff!important;
    background:linear-gradient(#1765ad,var(--b));
    border-color:var(--b);
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(11,63,120,.16)
}

.tj-cat26__card:hover:before {
    transform:scaleY(1)
}

.tj-cat26__card:hover b {
    color:#fff
}

.tj-cat26__card[hidden] {
    display:none!important
}

.tj-cat26__empty {
    margin-top:20px;
    padding:30px;
    text-align:center;
    border:1px dashed #cbd9e8;
    border-radius:14px
}

.tj-cat26__empty strong,.tj-cat26__empty span {
    display:block
}

.tj-cat26__empty span {
    margin-top:5px;
    color:#8191a7;
    font-size:12px
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {
    .tj-cat26__populares {
        grid-template-columns:repeat(5,minmax(145px,1fr));
        overflow-x:auto
    }

    .tj-cat26__dirhead {
        align-items:flex-start;
        flex-direction:column
    }

    .tj-cat26__alphabet {
        justify-content:flex-start
    }

    .tj-cat26__grid {
        grid-template-columns:repeat(3,1fr)
    }

}

/* =========================================================
   RESPONSIVE - MÓVIL
   ========================================================= */

@media (max-width: 700px) {
    .tj-cat26__container {
        width:calc(100% - 24px)
    }

    .tj-cat26__hero {
        padding:18px 0 25px
    }

    .tj-cat26 h1 {
        font-size:34px
    }

    .tj-cat26__lead {
        font-size:14px
    }

    .tj-cat26__search {
        min-height:54px;
        grid-template-columns:24px 1fr auto;
        padding-left:13px
    }

    .tj-cat26__search button {
        min-width:82px;
        height:42px;
        padding:0 13px;
        font-size:12px
    }

    .tj-cat26__search input {
        font-size:13px
    }

    .tj-cat26__populares {
        margin-right:-12px;
        grid-template-columns:repeat(5,145px)
    }

    .tj-pop26 {
        min-height:112px
    }

    .tj-cat26__directory {
        padding:29px 0 45px
    }

    .tj-cat26__grid {
        grid-template-columns:1fr;
        gap:8px
    }

    .tj-cat26__card {
        min-height:52px;
        font-size:13px
    }

}