/*
 * EcuadorUtil HUBS — canonical shared visual system.
 * Consumers: /tramites, /herramientas, /instituciones.
 * Owner: C03 HUB family.
 */

.eu-hub{
    --hub-navy:#0b1935;
    --hub-green:#079447;
    --hub-green-dark:#06783a;
    --hub-text:#53657f;
    --hub-border:#dfe8e3;
    --hub-soft:#f5fbf7;
    --hub-soft-2:#f8fafc;
    --hub-white:#ffffff;
    --hub-radius:22px;
    --hub-shadow:0 16px 42px rgba(15,23,42,.07);
    background:#fff;
    color:var(--hub-navy);
}

.eu-hub section > .container,
.eu-hub .eu-hub-section-heading.container{
    max-width:1180px;
}

.eu-hub .eu-hub-hero{
    margin:0;
    text-align:center;
    background:
        radial-gradient(circle at 84% 14%,rgba(34,197,94,.09),transparent 28%),
        linear-gradient(135deg,#fbfdfc 0%,#f0fbf5 100%);
}

.eu-hub .eu-hub-hero .page-badge{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 15px;
    border:1px solid #bfe8ce;
    border-radius:999px;
    background:#f4fbf6;
    color:#087a3d;
    font-size:.88rem;
    font-weight:800;
    letter-spacing:.02em;
}

.eu-hub .eu-hub-hero h1{
    max-width:900px;
    margin:22px auto 0;
    color:var(--hub-navy);
    font-size:clamp(2.7rem,5vw,4.45rem);
    font-weight:900;
    line-height:1.02;
    letter-spacing:-.052em;
    text-wrap:balance;
}

.eu-hub .eu-hub-hero > .container > p{
    max-width:760px;
    margin:20px auto 0;
    color:var(--hub-text);
    font-size:1.08rem;
    line-height:1.6;
}

.eu-hub .institution-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    max-width:740px;
    margin:30px auto 0;
}

.eu-hub .institution-stats > div{
    min-height:94px;
    padding:17px 20px;
    border:1px solid var(--hub-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.045);
}

.eu-hub .institution-stats strong{
    color:var(--hub-navy);
    font-size:1.7rem;
    font-weight:900;
}

.eu-hub .institution-stats span{
    color:var(--hub-text);
    font-size:.9rem;
    font-weight:700;
}

.eu-hub .eu-hub-listing{
    padding:54px 20px 82px;
    background:
        linear-gradient(180deg,#f6fcf8 0%,#ffffff 34%);
}

.eu-hub .eu-hub-section-heading{
    margin-top:40px;
    margin-bottom:24px;
}

.eu-hub .eu-hub-section-heading--listing{
    margin-top:0;
}

.eu-hub .eu-hub-eyebrow{
    display:block;
    margin-bottom:7px;
    color:var(--hub-green);
    font-size:.79rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.eu-hub .eu-hub-section-heading h2{
    margin:0;
    color:var(--hub-navy);
    font-weight:900;
    line-height:1.12;
    letter-spacing:-.035em;
}

.eu-hub .eu-hub-section-heading p{
    max-width:690px;
    margin:8px 0 0;
    color:var(--hub-text);
    line-height:1.55;
}

.eu-hub .tramites-grid,
.eu-hub .instituciones-page-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
}

.eu-hub .tramite-card,
.eu-hub .institution-premium-card,
.eu-hub .eu-tools-cv-grid-card,
.eu-hub .eu-tools-resign-card,
.eu-hub .eu-tools-vac-card{
    position:relative;
    min-width:0;
    border:1px solid var(--hub-border);
    background:#fff;
    box-shadow:var(--hub-shadow);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.eu-hub .tramite-card:hover,
.eu-hub .institution-premium-card:hover,
.eu-hub .eu-tools-cv-grid-card:hover,
.eu-hub .eu-tools-resign-card:hover,
.eu-hub .eu-tools-vac-card:hover{
    transform:translateY(-3px);
    border-color:#acdcbc;
    box-shadow:0 20px 46px rgba(15,23,42,.10);
}

.eu-hub .tramite-card{
    display:flex;
    flex-direction:column;
}

.eu-hub .tramite-card > .tag{
}

.eu-hub .tramite-card-main-link{
    display:flex;
    flex:1;
    min-width:0;
    flex-direction:column;
    text-decoration:none;
}

.eu-hub .tramite-card h3,
.eu-hub .institution-premium-card h3,
.eu-hub .eu-tools-cv-grid-card h3,
.eu-hub .eu-tools-resign-card h3,
.eu-hub .eu-tools-vac-card h3{
    margin:0 0 12px;
    color:var(--hub-navy);
    font-size:1.35rem;
    font-weight:900;
    line-height:1.24;
    letter-spacing:-.025em;
    text-wrap:balance;
}

.eu-hub .tramite-card-main-link > p,
.eu-hub .institution-premium-card p,
.eu-hub .eu-tools-cv-grid-card p,
.eu-hub .eu-tools-resign-card p,
.eu-hub .eu-tools-vac-card p{
    margin:0;
    color:var(--hub-text);
    font-size:.98rem;
    line-height:1.6;
}

.eu-hub .tramite-meta{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin:20px 0 0;
}

.eu-hub .tramite-meta span{
    display:block;
    width:100%;
    min-height:0;
    padding:10px 12px;
    overflow:visible;
    border:1px solid #e1e8e4;
    border-radius:12px;
    background:var(--hub-soft-2);
    color:#263852;
    font-size:.86rem;
    font-weight:700;
    line-height:1.4;
    white-space:normal;
    text-overflow:clip;
    overflow-wrap:anywhere;
}

.eu-hub .tramite-card-cta,
.eu-hub .institution-action,
.eu-hub .eu-tools-cv-grid-link,
.eu-hub .eu-tools-resign-link,
.eu-hub .eu-tools-vac-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:auto;
    padding-top:20px;
    color:var(--hub-green);
    font-size:.95rem;
    font-weight:900;
}

.eu-hub .institution-premium-card,
.eu-hub .eu-tools-cv-grid-card,
.eu-hub .eu-tools-resign-card,
.eu-hub .eu-tools-vac-card{
    display:flex;
    flex-direction:column;
    min-height:300px;
    text-decoration:none;
}

.eu-hub .institution-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:22px;
}

.eu-hub .institution-icon,
.eu-hub .eu-tools-cv-grid-icon,
.eu-hub .eu-tools-resign-icon,
.eu-hub .eu-tools-vac-icon{
    display:grid;
    width:52px;
    height:52px;
    flex:0 0 52px;
    place-items:center;
    border-radius:15px;
}

.eu-hub .institution-count,
.eu-hub .eu-tools-cv-grid-badge,
.eu-hub .eu-tools-resign-badge,
.eu-hub .eu-tools-vac-badge{
    padding:7px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
}

.eu-hub .eu-apost-feature,
.eu-hub .eu-bach-feature{
    border:1px solid #b9e8c9;
    border-radius:22px;
    box-shadow:0 12px 34px rgba(15,23,42,.055);
}

.eu-hub .eu-apost-feature h3,
.eu-hub .eu-bach-feature h3{
    margin:8px 0;
    color:var(--hub-navy);
    font-size:1.48rem;
    line-height:1.18;
    font-weight:900;
}

.eu-hub .tramites-search{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.eu-hub .tramites-categories{
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
}

.eu-hub .tramites-categories a{
    border-radius:999px;
}

.eu-hub .eu-hub-featured-head{
    padding:44px 20px 0;
    background:#fff;
}

.eu-hub .eu-hub-featured-head + .py-4,
.eu-hub .eu-hub-featured-head + .py-lg-5{
    padding-top:0 !important;
}

.eu-hub .eu-cv-highlight{
    max-width:1180px;
    margin:0 auto;
    border-radius:24px;
    box-shadow:0 16px 42px rgba(15,23,42,.09);
}

.eu-hub a:focus-visible,
.eu-hub button:focus-visible,
.eu-hub input:focus-visible{
    outline:3px solid rgba(14,165,75,.32);
    outline-offset:3px;
}

@media (max-width:1024px){
    .eu-hub .tramites-grid,
    .eu-hub .instituciones-page-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .eu-hub .eu-hub-hero{
        padding-top:58px;
    }
}

@media (max-width:700px){
    .eu-hub .eu-hub-hero{
    }

    .eu-hub .eu-hub-hero h1{
        font-size:clamp(2.25rem,11vw,3.1rem);
        letter-spacing:-.045em;
    }

    .eu-hub .eu-hub-hero > .container > p{
        font-size:1rem;
    }

    .eu-hub .institution-stats{
        grid-template-columns:1fr;
        gap:10px;
    }

    .eu-hub .institution-stats > div{
        min-height:78px;
    }

    .eu-hub .eu-hub-listing{
        padding:38px 16px 62px;
    }

    .eu-hub .tramites-grid,
    .eu-hub .instituciones-page-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .eu-hub .tramite-card,
    .eu-hub .institution-premium-card,
    .eu-hub .eu-tools-cv-grid-card,
    .eu-hub .eu-tools-resign-card,
    .eu-hub .eu-tools-vac-card{
        padding:20px;
        border-radius:19px;
    }

    .eu-hub .institution-premium-card,
    .eu-hub .eu-tools-cv-grid-card,
    .eu-hub .eu-tools-resign-card,
    .eu-hub .eu-tools-vac-card{
        min-height:auto;
    }

    .eu-hub .eu-hub-section-heading h2{
        font-size:1.75rem;
    }

    .eu-hub .eu-hub-featured-head{
        padding:34px 16px 0;
    }
}

@media (prefers-reduced-motion:reduce){
    .eu-hub *,
    .eu-hub *::before,
    .eu-hub *::after{
        scroll-behavior:auto !important;
        transition:none !important;
    }
}


/* ==========================================================
   SEARCH, STATS AND SHARED CARD CONTRACTS
   ========================================================== */

.eu-hub{
    --hub-content:1180px;
    --hub-search:900px;
    --hub-stats:740px;
}

.eu-hub .eu-hub-hero{
    padding:62px 20px 48px;
}

.eu-hub .eu-hub-hero > .container{
    max-width:var(--hub-content);
}

.eu-hub .eu-hub-hero .page-badge{
    gap:8px;
}

.eu-hub .eu-hub-hero .page-badge i{
    font-size:.95rem;
}

.eu-hub .eu-hub-search-wrap{
    width:min(100%,var(--hub-search));
    margin:26px auto 0;
}

.eu-hub .eu-hub-search{
    position:relative;
    display:grid;
    align-items:center;
    gap:14px;
    width:min(100%,var(--hub-search));
    min-height:72px;
    margin:26px auto 0;
    padding:7px 8px 7px 20px;
    border:1px solid #cfe4d6;
    border-radius:19px;
    background:#fff;
    box-shadow:0 12px 32px rgba(15,23,42,.075);
    text-align:left;
}

.eu-hub .eu-hub-search-wrap .eu-hub-search{
    width:100%;
    margin:0;
}

.eu-hub .eu-hub-search > i{
    color:#079447;
    font-size:1.55rem;
}

.eu-hub .eu-hub-search input{
    width:100%;
    min-width:0;
    height:54px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#14213d;
    font:inherit;
    font-size:1rem;
}

.eu-hub .eu-hub-search input::placeholder{
    color:#6b7280;
    opacity:1;
}

.eu-hub .eu-hub-search button{
    min-width:142px;
    min-height:56px;
    padding:0 24px;
    border:0;
    border-radius:14px;
    background:#079447;
    color:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}

.eu-hub .eu-hub-search button:hover{
    background:#067d3d;
}

.eu-hub .eu-hub-filter-status{
    position:absolute;
    top:calc(100% + 6px);
    left:20px;
    right:20px;
    color:#64748b;
    font-size:.8rem;
}

.eu-hub .institution-stats,
.eu-hub .eu-hub-stats{
    width:min(100%,var(--hub-stats));
    max-width:var(--hub-stats);
    margin:24px auto 0;
}

.eu-hub .institution-stats > div,
.eu-hub .eu-hub-stats > div{
    min-height:92px;
}

.eu-hub .eu-hub-listing > .container,
.eu-hub .eu-hub-featured-head > .container,
.eu-hub .py-4 > .container,
.eu-hub .py-lg-5 > .container{
    max-width:var(--hub-content);
}

.eu-hub .eu-hub-section-heading{
    max-width:760px;
}

.eu-hub .eu-hub-section-heading h2{
    font-size:clamp(2rem,3vw,2.55rem);
}

/* Trámites destacados */

.eu-hub .eu-tramites-featured{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.eu-hub
.eu-tramites-featured
> .eu-hub-featured-heading{
    grid-column:1 / -1;
    width:100%;
    max-width:760px;
    margin:18px 0 6px;
}

.eu-hub .eu-apost-feature,
.eu-hub .eu-bach-feature{
    display:flex;
    min-width:0;
    min-height:210px;
    flex-direction:column;
    justify-content:space-between;
    gap:20px;
    padding:24px;
}

/* Common card language */

.eu-hub .tramite-card,
.eu-hub .institution-premium-card,
.eu-hub .eu-tools-cv-grid-card,
.eu-hub .eu-tools-resign-card,
.eu-hub .eu-tools-vac-card{
    min-height:310px;
    padding:24px;
    border-radius:22px;
}

.eu-hub .tramite-card > .tag{
    display:inline-flex;
    align-self:flex-start;
    min-height:34px;
    align-items:center;
    margin:0 0 20px;
    padding:7px 11px;
    border-radius:999px;
    background:#e9f8ef;
    color:#087a3d;
    font-size:.78rem;
    font-weight:850;
}

.eu-hub .eu-hub-featured-head{
    padding-top:50px;
}

.eu-hub .eu-hub-listing{
    padding-top:50px;
}

.eu-hub
[data-eu-hub-filter-grid]
> [hidden]{
    display:none !important;
}

@media (max-width:700px){

    .eu-hub .eu-hub-hero{
        padding:42px 16px 38px;
    }

    .eu-hub .eu-hub-search{
        gap:10px;
        padding:12px;
        border-radius:17px;
    }

    .eu-hub .eu-hub-search input{
        height:46px;
        font-size:.95rem;
    }

    .eu-hub .eu-hub-search button{
        grid-column:1 / -1;
        width:100%;
        min-height:50px;
    }

    .eu-hub .institution-stats,
    .eu-hub .eu-hub-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .eu-hub .institution-stats > div,
    .eu-hub .eu-hub-stats > div{
        min-height:82px;
        padding:12px 8px;
    }

    .eu-hub .institution-stats strong,
    .eu-hub .eu-hub-stats strong{
        font-size:1.3rem;
    }

    .eu-hub .institution-stats span,
    .eu-hub .eu-hub-stats span{
        font-size:.72rem;
        line-height:1.2;
    }

    .eu-hub .eu-tramites-featured{
        grid-template-columns:1fr;
    }

    .eu-hub
    .eu-tramites-featured
    > .eu-hub-featured-heading{
        grid-column:1;
    }

    .eu-hub .tramite-card,
    .eu-hub .institution-premium-card,
    .eu-hub .eu-tools-cv-grid-card,
    .eu-hub .eu-tools-resign-card,
    .eu-hub .eu-tools-vac-card{
        min-height:auto;
    }
}

@media (max-width:390px){

    .eu-hub .institution-stats,
    .eu-hub .eu-hub-stats{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   ACCESSIBLE SEARCH GRID
   ========================================================== */

.eu-hub .eu-hub-search > .visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.eu-hub .eu-hub-search{
    grid-template-columns:auto minmax(0,1fr) auto;
}

.eu-hub .eu-hub-search input{
    grid-column:2;
}

.eu-hub .eu-hub-search button{
    grid-column:3;
    grid-row:1;
}

@media (max-width:700px){

    .eu-hub .eu-hub-search{
        grid-template-columns:auto minmax(0,1fr);
    }

    .eu-hub .eu-hub-search input{
        grid-column:2;
        grid-row:1;
    }

    .eu-hub .eu-hub-search button{
        grid-column:1 / -1;
        grid-row:2;
    }
}


/* ==========================================================
   EXPLORE / QUICK-FILTER COMPONENT
   ========================================================== */

.eu-hub .eu-hub-explore-section{
    padding:48px 20px 0;
    background:#fff;
}

.eu-hub .eu-hub-explore-section > .container{
    max-width:var(--hub-content);
}

.eu-hub .eu-hub-explore{
    width:100%;
    margin:0 0 48px;
    padding:28px 30px 30px;
    border:1px solid #dce9e1;
    border-radius:22px;
    background:#fff;
    box-shadow:0 12px 34px rgba(15,23,42,.05);
}

.eu-hub .eu-hub-explore-head{
    max-width:720px;
    margin-bottom:22px;
}

.eu-hub .eu-hub-explore-head .eu-hub-eyebrow{
    display:block;
    margin-bottom:7px;
}

.eu-hub .eu-hub-explore-title{
    color:#071b41;
    font-size:clamp(1.65rem,2.5vw,2.1rem);
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.025em;
}

.eu-hub .eu-hub-explore-head p{
    margin:9px 0 0;
    color:#53627d;
    font-size:1rem;
    line-height:1.55;
}

.eu-hub .eu-hub-explore-chips{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:10px 12px;
}

.eu-hub
.eu-hub-explore-chips
.tramites-categories{
    display:flex;
    width:100%;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:10px 12px;
    margin:0;
}

.eu-hub
.eu-hub-explore-chips
.tramites-categories a,
.eu-hub .eu-hub-explore-chip{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:9px 17px;
    border:1px solid #dce3e8;
    border-radius:999px;
    background:#fff;
    color:#17243f;
    font:inherit;
    font-size:.94rem;
    line-height:1.25;
    font-weight:800;
    text-decoration:none;
    white-space:normal;
    cursor:pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}

.eu-hub
.eu-hub-explore-chips
.tramites-categories a:hover,
.eu-hub .eu-hub-explore-chip:hover{
    border-color:#b9dfc7;
    background:#f1fbf5;
    color:#087a3d;
}

.eu-hub
.eu-hub-explore-chips
.tramites-categories a.active,
.eu-hub .eu-hub-explore-chip.is-active{
    border-color:#b9e6ca;
    background:#ecf9f1;
    color:#07863f;
}

.eu-hub .eu-hub-explore-chip:focus-visible,
.eu-hub
.eu-hub-explore-chips
.tramites-categories a:focus-visible{
    outline:3px solid rgba(7,148,71,.22);
    outline-offset:3px;
}

.eu-hub--tramites .tramites-page{
    padding-top:48px;
    background:#fff;
}

.eu-hub--tramites .eu-hub-explore{
    margin-bottom:48px;
}

.eu-hub--herramientas
.eu-hub-explore-section
+ .eu-hub-featured-head{
    padding-top:0;
}

.eu-hub--instituciones
.eu-hub-explore-section
+ .eu-hub-listing{
    padding-top:0;
}

@media (max-width:700px){

    .eu-hub .eu-hub-explore-section{
        padding:34px 16px 0;
    }

    .eu-hub .eu-hub-explore{
        margin-bottom:36px;
        padding:22px 18px 23px;
        border-radius:19px;
    }

    .eu-hub .eu-hub-explore-title{
        font-size:1.6rem;
    }

    .eu-hub .eu-hub-explore-chips{
        gap:8px;
    }

    .eu-hub
    .eu-hub-explore-chips
    .tramites-categories{
        flex-wrap:wrap;
        overflow:visible;
        gap:8px;
    }

    .eu-hub
    .eu-hub-explore-chips
    .tramites-categories a,
    .eu-hub .eu-hub-explore-chip{
        min-height:42px;
        padding:8px 13px;
        font-size:.88rem;
    }

    .eu-hub--tramites .tramites-page{
        padding-top:34px;
    }
}

@media (prefers-reduced-motion:reduce){

    .eu-hub
    .eu-hub-explore-chips
    .tramites-categories a,
    .eu-hub .eu-hub-explore-chip{
        transition:none;
    }
}
